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
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,
),
),
);
}
}
长这样
在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: <Widget>[
Box("1"),
Box("2"),
Box("3"),
],
),
);
MainAxisAlignment.start
mainAxisAlignment的默认值就是MainAxisAlignment.start，当我们不设置textDirection属性时，默认就是从左至右的方向，起始位置就是在左边的
如下
我们更改一下textDirection的值为从右至左
textDirection: TextDirection.rtl,
可以看到，水平方向的起始位置就变成了右边，子控件排列的方向就变成了从右至左进行排列，后面的值就不在演示该属性了，可自行尝试
MainAxisAlignment.center
将子控件放在主轴的中间位置
MainAxisAlignment.end
将子控件放在主轴的结束位置
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: <Widget>[
Box("1"),
Box("2"),
Box("3"),
],
),
);
MainAxisAlignment.start
将子控件放在主轴的开始位置，默认值即为start，verticalDirection的默认值为VerticalDirection.down，也就是从上至下的方向
下面我们来修改verticalDirection的值为up
Column(
mainAxisAlignment: MainAxisAlignment.start,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Box("1"),
Box("2"),
Box("3"),
],
),
可以看到，垂直方向的起始位置就变成了下边，子控件排列的方向就变成了从下至上进行排列，后面的值就不再演示该属性了，可自行尝试
MainAxisAlignment.center
将子控件放在主轴的中间位置
MainAxisAlignment.end
将子控件放在主轴的结束位置
MainAxisAlignment.spaceAround
将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件距边缘间距为中间子控件间距的一半
MainAxisAlignment.spaceBetween
将主轴空白位置进行均分，排列子元素，首尾子控件距边缘没有间隙
MainAxisAlignment.spaceEvenly
将主轴空白区域均分，使各个子控件间距相等
CrossAxisAlignment
前面我们已经说了，在Row（水平排列）控件中，CrossAxisAlignment的方向就是垂直的，在 Column（垂直排列）控件中，CrossAxisAlignment的方向就是水平的。
enum CrossAxisAlignment {
//将子控件放在交叉轴的起始位置
start,
//将子控件放在交叉轴的结束位置
end,
//将子控件放在交叉轴的中间位置
center,
//使子控件填满交叉轴
stretch,
//将子控件放在交叉轴的上，并且与基线相匹配（不常用）
baseline,
}
在Row中CrossAxisAlignment的效果
mainAxisAlignment的默认值是MainAxisAlignment.start，我们来看看CrossAxisAlignment不同的值显示效果是什么样的
CrossAxisAlignment.start
将子控件放在交叉轴的起始位置
此时，我们可以通过verticalDirection来控制交叉轴的起始位置及排列方向。
Row(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Box("1"),
Box("2"),
Box("3"),
],
)
可以看到，交叉轴的排列方向修改为从下至上，起始位置也变成了下方。下面其他的值效果类似，就不演示verticalDirection了
CrossAxisAlignment.center
将子控件放在交叉轴的中间位置，同样的可以通过TextDirection来指定起始位置
CrossAxisAlignment.end
将子控件放在交叉轴的结束位置
CrossAxisAlignment.stretch
使子控件填满交叉轴
在Column中CrossAxisAlignment的效果
Column(
children: <Widget>[
Box("1"),
Box("2"),
Box("3"),
],
),
CrossAxisAlignment.start
CrossAxisAlignment.center
CrossAxisAlignment.end
CrossAxisAlignment.stretch
总结
MainAxisAlignment和CrossAxisAlignment他们的值并不多，理解起来也比较简单，配合textDirection和verticalDirection基本上可以满足我们的需求了。
关于textDirection和verticalDirection我们不必死记硬背Row中是谁控制谁，在Column中是谁控制谁
我们只需要记住
textDirection就是用来控制水平方向的起始位置和排列方向
verticalDirection就是用来控制垂直方向的起始位置和排列方向
然后记住
MainAxisAlignment（主轴）就是与当前控件方向一致的轴
CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
记住了这两点，基本上MainAxisAlignment和CrossAxisAlignment就没什么问题了
网友评论