flutter中弹性布局

弹性布局

弹性布局是一种允许子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: [
        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默认即为控件的大小