1.Expanded
Expanded是用于展开Row,Column或Flex的子child的Widget。 使用Expanded可以使[Row],[Column]或[Flex]的子项扩展以填充主轴中的可用空间。
例:
- 不使用Expanded
红色Column组件不使用Expanded,Row中三个组件设置为mainAxisAlignment: MainAxisAlignment.spaceEvenly,效果如下
红色内容布局代码:
Container _transSectionColumn(title, value) {
return Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(title),
Text(value),
],
),
);
}
- 使用Expanded,填充横向空间
红色内容布局代码:
Expanded _transSectionColumn(title, value) {
return Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(title),
Text(value),
],
),
),
);
}