二十五、Widget和布局
Flutter的布局与HTML/CSS布局方式上的写法有很大的不同，Flutter使用基于组件树的布局模型，其中每个组件都有自己的布局和渲染逻辑。相比之下，HTML/CSS使用基于盒模型的布局，其中元素通过框模型和定位属性进行布局。
1.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 { bool _isPressed = false; @override Widget build(BuildContext context) { return RaisedButton( onPressed: () { setState(() { _isPressed = !_isPressed; }); }, child: Text(_isPressed ? 'Pressed' : 'Not Pressed'), ); }}
更多关于Widget的信息，你可以参考Flutter Widget介绍open in new window。
2.布局组件：构建灵活的用户界面
在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: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star), ],)
带你读《深入浅出Dart》二十五、Widget和布局（2）https://developer.aliyun.com/article/1348604?groupCode=tech_library
