Flex 类似 Android 中的 LinearLayout ,可以横着排列,也可以竖着排
排列方式通过 direction 来决定
required this.direction, //弹性布局的方向, Row默认为水平方向,Column默认为垂直方向
direction: Axis.horizontal, 水平排列
direction: Axis.vertical, 竖直排列
flex: 比例系数
flex参数为弹性系数,如果为 0 或null,则child是没有弹性的
上图红色占总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,
)
),
],
),
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,
)
),
],
),
)
Spacer
Spacer的功能是占用指定比例的空间,实际上它只是Expanded的一个包装类