MainAxisAlignment和CrossAxisAlignment简介
MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴）常用于Row和Column控件中，主要是用来控制子控件排列的位置，并可以配合textDirection和verticalDirection属性来控制子控件排列的方向及改变MainAxisAlignment和CrossAxisAlignment的起始位置。
简单来说
MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
在水平方向控件中，例如Row
MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右，此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向
CrossAxisAlignment是垂直的，默认起始位置在中间，排列方向为从上至下，此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向
在垂直方向的控件中，例如Column
MainAxisAlignment是垂直的，默认起始位置在上边，排列方向为从上至下，此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
CrossAxisAlignment是水平的，默认起始位置在中间，此时可以通过textDirection来改变CrossAxisAlignment的起始位置
MainAxisAlignment
enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}
MainAxisAlignment.start
mainAxisAlignment的默认值就是MainAxisAlignment.start，当我们不设置textDirection属性时，默认就是从左至右的方向，起始位置就是在左边的
image.png
textDirection的值为从右至左
image.png
MainAxisAlignment.center
将子控件放在主轴的中间位置
image.png
MainAxisAlignment.end
将子控件放在主轴的结束位置
image.png
MainAxisAlignment.spaceAround
将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件距边缘间距为中间子控件间距的一半
image.png
MainAxisAlignment.spaceBetween
将主轴空白位置进行均分，排列子元素，首尾子控件距边缘没有间隙
image.png
MainAxisAlignment.spaceEvenly
将主轴空白区域均分，使各个子控件间距相等
image.png
在Column中MainAxisAlignment的效果
在垂直方向的控件中，MainAxisAlignment就是垂直的，此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
MainAxisAlignment.start
将子控件放在主轴的开始位置，默认值即为start，verticalDirection的默认值为VerticalDirection.down，也就是从上至下的方向
image.png
MainAxisAlignment.center
将子控件放在主轴的中间位置
image.png
MainAxisAlignment.end
将子控件放在主轴的结束位置
MainAxisAlignment.spaceAround
将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件距边缘间距为中间子控件间距的一半
image.png
MainAxisAlignment.spaceEvenly
将主轴空白区域均分，使各个子控件间距相等
image.png
CrossAxisAlignment
在Row（水平排列）控件中，CrossAxisAlignment的方向就是垂直的，在 Column（垂直排列）控件中，CrossAxisAlignment的方向就是水平的。
enum CrossAxisAlignment {
//将子控件放在交叉轴的起始位置
start,
//将子控件放在交叉轴的结束位置
end,
//将子控件放在交叉轴的中间位置
center,
//使子控件填满交叉轴
stretch,
//将子控件放在交叉轴的上，并且与基线相匹配（不常用）
baseline,
}
具体效果参考 https://blog.csdn.net/yuzhiqiang_1993/article/details/86496145
网友评论