Flutter布局和容器

布局

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可以使用Expandedwidget

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

携带图标的文本