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,
),
),
],
),