前言
在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,
...
)
网友评论