Skip to content

弹性布局(Flex)

弹性布局允许子组件按照一定比例来分配父容器空间

Flex

Flex组件可以沿着水平或垂直方向排列子组件

如果你知道主轴方向,使用RowColumn会方便一些,因为RowColumn都继承自Flex,参数基本相同

dart
Flex({
  ...
  required this.direction, //弹性布局的方向, Row默认为水平方向,Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})

Expanded

Expanded 只能作为 Flex 的孩子(否则会报错),它可以按比例“扩伸”Flex子组件所占用的空间

因为 RowColumn 继都承自Flex,所以 Expanded 也可以作为它们的孩子

dart
const Expanded({
  int flex = 1, 
  required Widget child,
})

例子

dart
SizedBox(
  height: 30,
  child: Row(
    children: [
      Expanded(
        flex: 2,
        child: Container(color: Colors.green),
      ),
      Spacer(flex: 1),
      Expanded(
        flex: 1,
        child: Container(color: Colors.red),
      )
    ],
  ),
)

Spacer的功能是占用指定比例的空间,实际上它只是Expanded的一个包装类