登高而招，臂非加长也，而见者远；

👈🏻 Flutter学习之六 Row和Column

前言

上面文章介绍了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来处理。