《深入浅出Dart》Widget和布局
Widget和布局
Flutter的布局与HTML/CSS布局方式上的写法有很大的不同，Flutter使用基于组件树的布局模型，其中每个组件都有自己的布局和渲染逻辑。相比之下，HTML/CSS使用基于盒模型的布局，其中元素通过框模型和定位属性进行布局。
Widget：Flutter用户界面的构建块
在Flutter中，一切皆是Widget。Widgets是Flutter用户界面的基本构建块，用于描述应用程序在给定其当前配置和状态的情况下应该如何显示。通过组合不同的Widget，我们可以构建出复杂、美观的用户界面。
Flutter中的Widget分为两类：
StatelessWidget
StatelessWidget是不可变的，一旦创建就不能更改。它们通常用于表示那些没有状态改变的静态UI元素。例如，Icon、Text、Container等都是无状态的Widget。
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Hello World'),
);
}
}StatefulWidget
StatefulWidget是有状态的，可以根据应用程序的状态和用户交互来改变。当状态发生变化时，StatefulWidget会自动重绘UI。常见的有状态Widget包括按钮、输入框、列表等。
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
setState(() {
_isPressed = !_isPressed;
});
},
child: Text(_isPressed ? 'Pressed' : 'Not Pressed'),
);
}
}更多关于Widget的信息，你可以参考Flutter Widget介绍。
布局组件：构建灵活的用户界面
在Flutter中，有多种布局组件可供选择，用于在屏幕上排列和定位Widget。以下是几个常用的布局组件：
Container
Container是一个多功能的容器，可以用于装饰、定位和约束其子Widget。你可以设置它的大小、颜色、边距等。
Container(
color: Colors.blue,
width: 200,
height: 200,
child: Text('Hello'),
)Row和Column
Row和Column是用于水平和垂直排列子Widget的强大布局组件。你可以在它们内部添加各种子Widget，并使用mainAxisAlignment和crossAxisAlignment来调整对齐方式。
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
)Stack
Stack允许将多个子Widget堆叠在一起，可以通过定位、对齐和尺寸调整来控制它们的位置。
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(color: Colors.red, width: 200, height: 200),
Container(color: Colors.green, width: 150, height: 150),
Container(color: Colors.blue, width: 100, height: 100),
],
)ListView
ListView是一个滚动视图，可用于显示可滚动的列表。你可以使用ListView.builder或ListView.separated来构建列表。
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
)Expanded
Expanded是一个灵活的布局组件，用于占据剩余可用空间。它通常与Row和Column一起使用。
Row(
children: <Widget>[
Expanded(
child: Container(color: Colors.red),
),
Expanded(
child: Container(color: Colors.green),
),
],
)这只是布局组件中的几个例子，Flutter提供了丰富的布局组件，适应各种不同的UI需求。你可以根据需要选择合适的布局组件。
要了解更多关于布局的内容，你可以参考Flutter布局指南。
结论
通过理解Widget和常用布局组件，你已经迈出了构建Flutter应用程序的第一步。Widget作为Flutter用户界面的构建块，帮助我们构建出灵活、交互丰富的应用程序。布局组件则允许我们在屏幕上排列和定位Widget，创建出美观、一致的用户界面。