前言
在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴，比如Row的主轴是水平方向，交叉轴是垂直方向，而Column的主轴是垂直方向，交叉轴是水平方向。
Row和Column是多子控件的容器类控件，Row控件水平布局，Column控件垂直布局。
Row({
...
TextDirection textDirection,
MainAxisSize mainAxisSize = MainAxisSize.max,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
VerticalDirection verticalDirection = VerticalDirection.down,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
List<Widget> children = const <Widget>[],
})
-
textDirection：表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。 -
mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；而MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的的水平空间； -
mainAxisAlignment：表示子组件在Row所占用的水平空间内对齐方式，如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子组件的宽度等于Row的宽度。只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义，MainAxisAlignment.start表示沿textDirection的初始方向对齐，如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中对齐。读者可以这么理解：textDirection是mainAxisAlignment的参考系。 -
verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。 -
crossAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反； -
children：子组件数组。
主轴对齐方式
Row控件的主轴 mainAxisAlignment 对齐方式默认值是MainAxisAlignment.start，即子控件从开始处排列，这个开始处不一定是左边，是从左到右还是从右到左排列取决于文本方向textDirection属性，比如阿拉伯文本方向是从右到左的。
Row(
children: <Widget>[
Container(
height: 50,
width: 100,
color: Colors.red,
),
Container(
height: 50,
width: 100,
color: Colors.green,
),
Container(
height: 50,
width: 100,
color: Colors.blue,
),
],
)
效果如图：
image.png
黑色边框是Row控件的范围，默认情况下Row铺满父组件。主轴的对齐方式设置代码如下：
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
-
star
image.png
-
center
image.png
-
end
image.png
-
spaceBetween
image.png
-
spaceEvenly
image.png
-
spaceAround
image.png
spaceAround和spaceEvenly区别是：
-
spaceAround：第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。 -
spaceEvenly：所有间距一样。
交叉轴对齐方式
和主轴相对应的就是交叉轴
crossAxisAlignment，交叉轴对齐方式默认是居中。Row控件的高度依赖子控件高度，因此子控件高都一样时，Row的高和子控件高相同，此时是无法体现交叉轴对齐方式，修改3个颜色块高分别为50，100，150，这样Row的高是150，代码如下：
Row(
children: <Widget>[
Container(
height: 50,
width: 100,
color: Colors.red,
),
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
height: 150,
width: 100,
color: Colors.blue,
),
],
)
效果如下:
image.png
交叉轴属性设置代码如下：
Row(
crossAxisAlignment: CrossAxisAlignment.center,
...
)
-
center
image.png
-
star
image.png
-
stretch
image.png
-
end
image.png
CrossAxisAlignment.stretch表示使子控件填满交叉轴。
textDirection和verticalDirection
属性textDirection控制水平方向布局，值包含TextDirection.ltr(从左到右)和TextDirection.rtl (从右到左)，verticalDirection 控制垂直方向布局，值包含VerticalDirection.up(从上到下)和VerticalDirection.down(从下到上),用法如下:
Row(
textDirection: TextDirection.rtl,
...
)
image.png
想一想这种效果完全可以通过主轴的方式实现，那么为什么还要有textDirection 和verticalDirection这2个属性，官方API文档已经解释了这个问题：
his is also used to disambiguate `start` and `end` values (e.g. [MainAxisAlignment.start] or [CrossAxisAlignment.end]).
用于消除“start”和“end”值的歧义的。
主轴尺寸
主轴尺寸由
mainAxisSize属性控制，仅有min和max两种方式，默认是max方法。min表示尽可能小，而max表示尽可能大，设置min的代码如下：
Row(
mainAxisSize: MainAxisSize.min,
...
)
网友评论