Flutter布局组件<弹性布局Flex>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

弹性布局允许子组件按照一定比例来分配父容器空间（听起来有点像Android的LinearLayout内部使用weight属性设置子元素所占比例）。弹性布局的概念在其它UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout等。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

Flex

Flex组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded组件配合实现弹性布局。接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)。

既然要和Expanded组件配合使用，那就先介绍一下Expanded吧！

Expanded

Expanded的作用就是：可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。

const Expanded({
  Key key,
  int flex = 1,
  @required Widget child,
})

flex 为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。

body: Container(
    color: Colors.blue,
    child: Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
          child: RaisedButton(
            child: Text("AAAAAAAAAAAAAAAAAAAA"),
            onPressed: () {},
          ),
          flex: 2,
        ),
        Expanded(
          child: RaisedButton(
            child: Text("AAAAAAAAAAAAAAAAAAAA"),
            onPressed: () {},
          ),
          flex: 1,
        ),
      ],
    ))

运行效果

比例分割空间