Flutter flex布局组件

Flex 布局是目前 web 和移动端最流行的布局方式，在 Flutter 中，也有对应的组件，它们就是：

容器组件

  • Row：水平方向上创建一个 flex 容器。
  • Column：垂直方向上创建一个 flex 容器。

  • Flex：直接创建一个 flex 容器，不指定方向，它是 Row 和 Column 组件的父类。

    1
    2
    class Row extends Flex 
    class Column extends Flex

    Flex 有个 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Row(
  children: <Widget>[
    Expanded(
      flex: 3, // 60% of space
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2, // 40% of space
      child: Container(
        color: Colors.purple,
      ),
    ),
  ],
),