Flex 布局是目前 web 和移动端最流行的布局方式,在 Flutter 中,也有对应的组件,它们就是:
容器组件
- Row:水平方向上创建一个 flex 容器。
- Column:垂直方向上创建一个 flex 容器。
Flex:直接创建一个 flex 容器,不指定方向,它是 Row 和 Column 组件的父类。
1
2class Row extends Flex
class Column extends FlexFlex 有个
direction
属性能够控制容器布局主轴方向,例如指定Axis.horizontal
时跟 Row 一样的效果。
填充组件(必须是容器组件的children)
- Expanded:在主轴方向自动扩展,填充父级 Flex 容器可用的空白区域。
Flexible:是 Expanded 的父类
1
class Expanded extends Flexible
与 Expanded 组件不同,它不强制子组件填充可用空间。它有个
fit
属性,值可取FlexFit.loose
(不强制扩展) 和FlexFit.tight
(强制扩展)。Spacer:在 Flex 容器内创建一个可以调整的空白区域,可用于调整组件之间的间距。
注意:一旦 Flex 容器组件的 children 里面包含了 Spacer。
mainAxisAlignment
的属性值将起不到作用,因为 Spacer 已经占据了所有额外的空间,没有剩余的空间可分配了。
应用案例
Row 中的子组件按照 3 比 2 平分空间。
1 | Row( |