登高而招，臂非加长也，而见者远；
前言
上面文章介绍了Row和Column的简单布局，但是在使用的时候，一些细节的布局还得使用其他组件，其中就有专门针对弹性布局而生的Expanded。
正文
在Row和Column中，我提到了弹性布局Flex，Row和Column都是继承自Flex，Flex比较简单，定义如下：
Flex({
Key? key,
required this.direction,
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
this.clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
})
看到这个是不是觉得眼熟，在这里就不再详细说了。Flex、Row、Column是弹性布局组件，Expanded只能用于弹性局部中，记住这点就行了。
Expanded作用
很简单就一句话，Expanded包含的组件可以占据剩余的空间。
-
场景一
先看下面一个常见的页面，图1：
1.png
简单分析一下，首先是横向布局，左右边距都是20，左边是个头像，右边是个按钮，中间是
Text占据所有空间，这时候用Expanded是最香的。代码如图2：
2.png
细心的小伙伴已经发现了，在头像和文字中间我用了一个
SizeBox，因为他俩中间是有个10的间距的。这时候用SizeBox是很舒服的。可以开启图层看下，如图3：
3.png
-
场景二
有些需求是组件之间要有一定的比例，先上效果图，如图4：
4.png
上面的红蓝红比例是
1:2:1来占据Row的空间，不管手机屏幕怎么变化，这个比例是不会变的，代码如图5：
5.png
后记
-
Expanded是用弹性布局（Flex、Row、Column）里面的，为了占用剩余所有空间。 - 在弹性布局中，如果2个组件之间有小间距，可以使用
SizeBox来处理。
