一. 多子布局组件
在开发中，我们经常需要将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；
这个时候我们需要使用多子布局组件（Multi-child layout widgets）。
比较常用的多子布局组件是Row、Column、Stack，我们来学习一下他们的使用。
1.1. Flex组件
事实上，我们即将学习的Row组件和Column组件都继承自Flex组件。
- Flex组件和Row、Column属性主要的区别就是多一个direction。
- 当direction的值为Axis.horizontal的时候，则是Row。
- 当direction的值为Axis.vertical的时候，则是Column。
在学习Row和Column之前，我们先学习主轴和交叉轴的概念。
因为Row是一行排布，Column是一列排布，那么它们都存在两个方向，并且两个Widget排列的方向应该是对立的。
它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：
- 对于Row来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图
- 对于Column来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图
1.1. Row组件
1.1.1. Row介绍
Row组件用于将所有的子Widget排成一行，实际上这种布局应该是借鉴于Web的Flex布局。
如果熟悉Flex布局，会发现非常简单。
从源码中查看Row的属性：
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
TextDirection textDirection, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴（垂直）的对齐方向
TextBaseline textBaseline, // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
List<Widget> children = const <Widget>[],
})
部分属性详细解析：（不过文字是真的难描述，后续推出视频学习较差）
mainAxisSize：
- 表示Row在主轴(水平)方向占用的空间，默认是
MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度 - 而
MainAxisSize.min表示尽可能少的占用水平空间，当子widgets没有占满水平剩余空间，则Row的实际宽度等于所有子widgets占用的的水平空间；
mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式
- 如果mainAxisSize值为
MainAxisSize.min，则此属性无意义，因为子widgets的宽度等于Row的宽度 - 只有当mainAxisSize的值为
MainAxisSize.max时，此属性才有意义 -
MainAxisAlignment.start表示沿textDirection的初始方向对齐， - 如textDirection取值为
TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。 - 而
MainAxisAlignment.end和MainAxisAlignment.start正好相反； -
MainAxisAlignment.center表示居中对齐。
crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式
- Row的高度等于子Widgets中最高的子元素高度
- 它的取值和MainAxisAlignment一样(包含
start、end、center三个值) - 不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为
VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
1.1.2. Row演练
我们来对部分属性进行简单的代码演练，其他一些属性大家自己学习一下
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(color: Colors.red, width: 60, height: 60),
Container(color: Colors.blue, width: 80, height: 80),
Container(color: Colors.green, width: 70, height: 70),
Container(color: Colors.orange, width: 100, height: 100),
],
);
}
}
1.1.3. mainAxisSize
默认情况下，Row会尽可能占据多的宽度，让子Widget在其中进行排布，这是因为mainAxisSize属性默认值是MainAxisSize.max。
我们来看一下，如果这个值被修改为MainAxisSize.max会什么变化：
1.1.4. TextBaseline
关于TextBaseline的取值解析
1.1.5. Expanded
如果我们希望红色和黄色的Container Widget不要设置固定的宽度，而是占据剩余的部分，这个时候应该如何处理呢？
这个时候我们可以使用 Expanded 来包裹 Container Widget，并且将它的宽度不设置值；
- flex属性，弹性系数，Row会根据两个Expanded的弹性系数来决定它们占据剩下空间的比例
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: Container(color: Colors.red, height: 60),
),
Container(color: Colors.blue, width: 80, height: 80),
Container(color: Colors.green, width: 70, height: 70),
Expanded(
flex: 1,
child: Container(color: Colors.orange, height: 100),
)
],
);
}
}
1.2. Column组件
Column组件用于将所有的子Widget排成一列，学会了前面的Row后，Column只是和row的方向不同而已。
1.2.1. Column介绍
我们直接看它的源码：我们发现和Row属性是一致的，不再解释
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
1.2.2. Column演练
我们直接将Row的代码中Row改为Column，查看代码运行效果：
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: Container(color: Colors.red, width: 60),
),
Container(color: Colors.blue, width: 80, height: 80),
Container(color: Colors.green, width: 70, height: 70),
Expanded(
flex: 1,
child: Container(color: Colors.orange, width: 100),
)
],
);
}
}
1.3. Stack组件
在开发中，我们多个组件很有可能需要重叠显示，比如在一张图片上显示文字或者一个按钮等。
在Android中可以使用Frame来实现，在Web端可以使用绝对定位，在Flutter中我们需要使用层叠布局Stack。
1.3.1. Stack介绍
我们还是通过源码来看一下Stack有哪些属性：
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
参数j解析：
- alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
- textDirection：和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为
TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。 - fit：此参数用于决定没有定位的子widget如何去适应Stack的大小。
StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。 - overflow：此属性决定如何显示超出Stack显示空间的子widget，值为
Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible时则不会。
1.3.2. Stack演练
Stack会经常和Positioned一起来使用，Positioned可以决定组件在Stack中的位置，用于实现类似于Web中的绝对定位效果。
我们来看一个简单的演练：
class MyHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
color: Colors.purple,
width: 300,
height: 300,
),
Positioned(
left: 20,
top: 20,
child: Icon(Icons.favorite, size: 50, color: Colors.white)
),
Positioned(
bottom: 20,
right: 20,
child: Text("你好啊", style: TextStyle(fontSize: 20, color: Colors.white)),
)
],
);
}
}
注意：Positioned组件只能在Stack中使用。
