弹性布局
弹性布局是一种允许子widget按照一定比例来分配父容器空间的布局方式，如果你知道了它的主轴方向，那就可以用Row或Column了，一般情况下，可以用Flex的地方都可以用Row或者Column一起使用，通常配合Expanded Widget来使用，同样Expanded也不能脱离Flex单独创建。
Expanded
Expanded继承自Flexible，Flexible是一个控制Row、Column、Flex等子组件如何布局的组件，它可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。
const Expanded({
int flex = 1,
@required Widget child,
})
flex为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
示例代码
Row(children: <Widget>[
RaisedButton(
onPressed: () {
print('点击红色按钮事件');
},
color: Colors.red,
child: Text('红色按钮'),
),
Expanded(
flex: 1,
child: RaisedButton(
onPressed: () {
print('点击黄色按钮事件');
},
color: Colors.yellow,
child: Text('黄色按钮'),
),
),
RaisedButton(
onPressed: () {
print('点击粉色按钮事件');
},
color: Colors.green,
child: Text('绿色按钮'),
),
])
代码运行效果
Flexible和 Expanded的区别
- Flexible组件必须是Row、Column、Flex等组件的后裔，并且从Flexible到它封装的Row、Column、Flex的路径必须只包括StatelessWidgets或StatefulWidgets组件(不能是其他类型的组件，像RenderObjectWidgets)
- Row、Column、Flex会被Expanded撑开，充满主轴可用空间，而Flexible不强制子组件填充可用空间，这是因为fit属性的值不同，该属性在Expanded中为FlexFit.tight，Flexible为FlexFit.loose，区别在于tight表示强制使子控件填充剩余可用空间，loose表示最多填满其在父控件所设置的比例，所以loose默认即为控件的大小
