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: [

? ? ? ? ? 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: [

? ? ? ? ? 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.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: [

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? )

可以看到，交叉轴的排列方向修改为从下至上，起始位置也变成了下方。下面其他的值效果类似，就不演示verticalDirection了

CrossAxisAlignment.center

将子控件放在交叉轴的中间位置，同样的可以通过TextDirection来指定起始位置

CrossAxisAlignment.end

将子控件放在交叉轴的结束位置

CrossAxisAlignment.stretch

使子控件填满交叉轴

在Column中CrossAxisAlignment的效果

Column(

? ? ? ? children: [

? ? ? ? ? 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就没什么问题了