布局
1. Flex
Flex布局,配合子元素Expanded弹性布局
- direction: 方向,
Axis.horizontal
Axis.vertical
- children
2. Row
子元素水平排列
- textDirection: 文字排列方向
- mainAxisSize: 水平方向的宽度,
MainAxisSize.max
表示填充水平方向,MainAxisSize.min
适应子元素大小 - mainAxisAlignment: 水平方向的对齐方式,
MainAxisSize.min
下无效,基本和flex
布局类似 - verticalDirection: 垂直方向的对齐方向,决定
crossAxisAlignment
对齐的位置,默认是VerticalDirection.down
,表示从上到下 - crossAxisAlignment: 垂直方向的对齐方式
- children
3. Column
子元素垂直排列,属性和Row一致
需要注意
Row、Column
只有最外层才会占满空间,内层的Row、Column
只是适应大小,如果想让内部Row、Column
可以使用Expanded
widget
4. Wrap
上面的布局在子元素超出之后会报错,不会自动下移,wrap超出子元素可以自定下移,下面是一些特有属性
- spacing: 主轴子方向widget的间距
- runSpacing: 纵轴方向的间距
- runAlignment: 纵轴方向的对齐方式
5. Flow
flow布局需要自己实现位置转换,在此不多赘述,适合自定义布局或性能要求较高的场景
6. Stack和Positioned
Stack为容器
- fit: 用于决定没有定位的子元素如何去适应
Stack
的大小,StackFit.loose
表示自适应,StackFit.expand
表示拉伸至Stack
的大小 - overflow: 此属性决定如何显示超出Stack显示空间的子元素,
Overflow.clip
超出部分裁剪,Overflow.visible
则不会
容器
1. ConstrainedBox
对子元素添加限制BoxConstraints,如设置minHeight
2. SizedBox
可设置大小的盒子
3. Padding
只能设置padding
4. Expanded
填充空间,可以用做填充Row子Row,或者flex布局,会自动填充剩余空间
5. DecoratedBox
装饰子元素(如背景、边框、渐变),通常使用BoxDecoration
修饰decoration
6. Transform变换
对子元素做变换,旋转、平移、缩放,Transform应用在绘制阶段,而不是布局时期,所以transform不会影响元素位置和大小
7. RotatedBox
可以在布局阶段旋转,可以影响位置和大小
8. Container
可以看成span,可以设置margin和padding、width、height...
9. Scaffold、TabBar、底部导航
滚动列表
1. SingleChildScrollView
单元素滚动
2. ListView
3. GridView
网格布局
4. CustomScrollView
可以让多种滚动列表合并在一个中,SliverGrid
网格、SliverFixedExtentList
列表
其他元素
Chip
携带图标的文本