1.概要

通常情况下，在Flutter中进行布局，使用Row和Column能够布局子Widget的位置。

image.png 我们可以使用Expanded包裹住子Widget，使其子Widget在Row和Column中能够尽可能的扩展充满空白区域。 image.png

2.源码

class Expanded extends Flexible {
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

1.可以看出，Expanded是继承自Flexible，作用是让子Widget尽可能的扩展，填充满空白区域。
2.可以通过flex设置多个Expanded之间的比例，默认为1。
3.只能在Row、Column、Flex的子Widget中使用。

3.示例

Column(
        children: [
          Expanded(flex: 1, child: Container(color: Colors.red,)),
          Expanded(flex: 2, child: Container(color: Colors.yellow,)),
          Expanded(flex: 1, child: Container(color: Colors.orange,)),
          Expanded(flex: 2, child: Container(color: Colors.blue,))
        ],
      )

image.png