Flutter 弹性布局组件_flutter flex 类似 weight

Flutter 弹性布局组件

概述

弹性布局组件，类似于Android中weight属性。弹性布局指子组件可以按照一定比例分配父容器空间。

Flexible

Flexible组件可以控制Row、Column、Flex的子组件占满父组件

fit：填充剩余空间的方式
	- loose：默认值，尽可能填满剩余空间，也可以不填满。
	- tight：强制填满剩余空间。
	
flex：按比例划分空间。    
1
2
3
4
5

fit属性

Row(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Flexible(
      child: Container(
        width: 50,
        height: 50,
        color: Colors.green,
      ),
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
),
const SizedBox(height: 10),
Row(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.green,
      ),
    ),
    Container(
      width: 50,
      height: 50,
      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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

flex属性

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(height: 50, color: Colors.red),
    ),
    Flexible(
      flex: 2,
      child: Container(height: 50, color: Colors.green),
    ),
    Flexible(
      flex: 3,
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Expanded

Expanded继承于Flexible组件，默认会填满剩余空间。

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Expanded(
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)
1
2
3
4
5
6
7
8
9

Spacer

Spacer本质是由Expanded组件实现，区别是：Expanded组件可以设置子元素，Spacer不能拿设置子元素，主要用于填充空白用的。

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    const Spacer(),
    Container(width: 50, height: 50, color: Colors.green),
    const Spacer(),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)
1
2
3
4
5
6
7
8
9

Flex & Expanded

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