Flutter - Flex ,Expanded ,Spacer_flutter spacer

Flex 类似 Android 中的 LinearLayout ,可以横着排列,也可以竖着排
排列方式通过 direction 来决定

required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向

direction: Axis.horizontal,  水平排列
direction: Axis.vertical,    竖直排列
1
2
3
4

flex:    比例系数
flex参数为弹性系数，如果为 0 或null，则child是没有弹性的
1
2

上图红色占总1 份 绿色占2份

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Expanded(
        flex: 1,
        child: Container(
          height: 30,
          color: Colors.red,
        )
    ),
    Expanded(
        flex: 2,
        child: Container(
          height: 30,
          color: Colors.green,
        )
    ),
  ],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Expanded
Expanded 只能作为 Flex 的子控件（否则会报错）
因为 Row和Column 都继承自 Flex，所以 Expanded 也可以作为它们的子控件。

上图红色占总2 份 ,空白占1份 ,蓝色占1份

Container(
  height: 200,
  child: Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Expanded(
          flex: 2,
          child: Container(
            color: Colors.red,
          )
      ),
      Spacer(
        flex: 1,
      ),
      Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
          )
      ),
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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