1. Flex组件
事实上，我们即将学习的Row组件和Column组件都继承自Flex组件。
- Flex组件和Row、Column属性主要的区别就是多一个direction。
- 当direction的值为Axis.horizontal的时候，则是Row。
- 当direction的值为Axis.vertical的时候，则是Column。
2. Row组件
Row组件用于将所有的子Widget排成一行，实际上这种布局应该是借鉴于Web的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正好相反
image.png
2.1 Expanded
如果我们希望红色和黄色的Container Widget不要设置固定的宽度，而是占据剩余的部分，这个时候应该如何处理呢？
这个时候我们可以使用 Expanded 来包裹 Container Widget，并且将它的宽度不设置值；
-
flex属性，弹性系数，Row会根据两个Expanded的弹性系数来决定它们占据剩下空间的比例
image.png
3. Column组件
Column组件用于将所有的子Widget排成一列，学会了前面的Row后，Column只是和row的方向不同而已。
我们直接看它的源码：我们发现和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>[],
})
学习内容来自Flutter从入门到实战
