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,
}
下面是/渐变的正方形
class Box extends StatelessWidget {
String index;
double boxSize=100;
Box(String index) {
this.index = index;
}
@override
Widget build(BuildContext context) {
return Container(
width: boxSize,
height: boxSize,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orangeAccent, Colors.orange, Colors.deepOrange]),
),
child: Text(
index,
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
);
}
}
如图所示:
20190115170938592.png
在Row中MainAxisAlignment的效果
前面我们说到了,在水平方向的控件中,MainAxisAlignment就是水平的,但默认的方向是从左到右,也就是说默认的起始位置在左边,
我们可以通过textDirection来改变水平方向的起始位置.
放三个正方形,看看默认效果
Container(
width: double.infinity,
height: 500,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Row(
children:[
Box("1"),
Box("2"),
Box("3"),
],
),
);
MainAxisAlignment.start
MainAlignment的默认值就是MainAlignment.start,当我们不设置textDirection属性时,默认就是从左到右的方向,起始位置就是在左边的
如下:
我们更改一下textDirection的值从右至左
textDirection: TextDirection.rtl,
20190116101842208.png
可以看到,水平方向的起始位置就变成了右边,子控件排列的方向就变成了从右至左进行排列,后面的值就不在演示了,可自行尝试
MainAxisAlignment
将子控件放在主轴的中间位置
MainAxisAlignment
将子控件放在主轴的结束位置
MainAxisAlignment.spaceAround
将主轴空白区域均分,使中间各个子控件间距相等,首尾子控件距边缘间距为中间子控件间距的一半
MainAxisAlignment.spaceBetween
将主轴空白位置进行均分,排列子元素,首尾子控件距边缘没有间隙
MainAxisAlignment.spaceEvenly
将主轴空白区域均分,使各个子控件间距相等
在Column中MainAxisAlignment的效果
在垂直方向的控件中,MainAxisAlignment就是垂直的,此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
如:
Container(
width: double.infinity,
height: 500,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children:[
Box("1"),
Box("2"),
Box("3"),
],
),
);
MainAxisAlignment.start
将子控件放在主轴的开始位置,默认值即为start,verticalDirection的默认值为verticalDirection.down,也就是从上至下的方向
下面我们来修改verticalDirection的值为up
Column(
mainAxisAlignment: MainAxisAlignment.start,
verticalDirection: VerticalDirection.up,
children:[
Box("1"),
Box("2"),
Box("3"),
],
),
可以看到,垂直方向的起始位置就变成来下边,子控件排列的方向就变成来从下至上进行排列,后面的值就不再演示该属性来,可自行尝试
MainAxisAlignment.center
将子控件放在主轴的中间位置
MainAxisAlignment.end
将子控件放在主轴的结束位置
总结
MainAxisAlignment和CrossAxisAlignment他们的值并不多，理解起来也比较简单，配合textDirection和verticalDirection基本上可以满足我们的需求了。
关于textDirection和verticalDirection我们不必死记硬背Row中是谁控制谁，在Column中是谁控制谁
我们只需要记住
textDirection就是用来控制水平方向的起始位置和排列方向
verticalDirection就是用来控制垂直方向的起始位置和排列方向
然后记住
MainAxisAlignment（主轴）就是与当前控件方向一致的轴
CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
记住了这两点，基本上MainAxisAlignment和CrossAxisAlignment就没什么问题了