Expanded 布局

属性说明flex弹性参数children子组件

可以把Expanded布局中的flex看作Android中xml属性中的android:layout_weight这个属性

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), ], ), ); } 123456789101112

2.使用Expanded，填充横向空间

红色内容布局代码：

Expanded _transSectionColumn(title, value) { return Expanded( child: Container( color: Colors.red, child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Text(title), Text(value), ], ), ), ); } 1234567891011121314

Row、Column、Flex会被Expanded撑开，充满主轴可用空间。

使用方式：

Row( children: <Widget>[ Container( /// 此组件在主轴方向占据48.0逻辑像素 width: 48.0 ), Expanded( child: Container() /// 此组件会填满Row在主轴方向的剩余空间，撑开Row ) ] ) 12345678910

Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间(例如，Row在水平方向，Column在垂直方向)。如果多个子组件展开，可用空间会被其flex factor(表示扩展的速度、比例)分割。

Expanded组件必须用在Row、Column、Flex内，并且从Expanded到封装它的Row、Column、Flex的路径必须只包括StatelessWidgets或StatefulWidgets组件(不能是其他类型的组件，像RenderObjectWidget，它是渲染对象，不再改变尺寸了，因此Expanded不能放进RenderObjectWidget)。