Flutter-Flex、Row、Column组件

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从入门到实战