Flutter学习之MainAxisAlignment属性详解

前言

我们在上一篇文章中，通过两种方式解决了，子widget相对父布局居左和居右。第二种方式是通过Row中的MainAxisAlignment属性实现的，代码非常简单，大家可以去上一篇文章中看看。这篇文章我们将详细讲解MainAxisAlignment这个属性里面值得含义，为什么会能完成我们上一篇的效果。当然这个属性不是Row特有，Column中也有，只不过Row的主轴是水平方向上面的，Column是竖直方向上的。MainAxisAlignment属性就是代表主轴方向的对齐方式。本文我们将以Row为例来讲解，Columu其实也是一样的意思，只不过方向不一样。好的，下面我们进入正题。

正文

MainAxisAlignment里面一共有6个值，分别是start，center，end，spaceBetween，spaceAround，spaceEvenly；前三个相信大家很容易理解，我们重点讲解后面三个值的效果。上一篇我已经留下这三个属性的源码注释了，不知道大家有没有理解，我们再来看一次：

// Place the free space evenly between the children.
MainAxisAlignment.spaceBetween
// Place the free space evenly between the children as well as half of that
// space before and after the first and last child.
MainAxisAlignment.spaceAround
// Place the free space evenly between the children as well as before and
// after the first and last child.
MainAxisAlignment.spaceEvenly

像我这种英语菜鸡，貌似看上去每个单词都认识，但是特么完全不知道啥意思啊😂😂😂。只能看看翻译软件咋翻译的了，没办法，谁叫自己英语这门菜呢😭😭😭。ps：千万别用有道云翻译，根本不知道翻译的啥鬼意思。下面我们看看Google翻译的结果： 翻译.png

看过翻译之后，貌似明朗很多。然后我们再配合代码的效果来理解这个属性，效果是这样的：

mainAxisAlignment.png

我分别演示了Row中包含2个，3个，4个子widget的效果，更有对比性，可以让大家更好的理解这三个属性。下面我们来一个个解释这些值的含义：

MainAxisAlignment.spaceBetween

我们先来看看spaceBetween，源码注释给的意思是将自由空间均匀放置在孩子之间，配合我们代码演示的效果。我们可以知道spaceBetween的作用应该是：

1. 在父widget中，除去子widget所占据的空间，将剩余的空间均匀的分配在子widget之间，所以我们看到图上每个widget之间的空白部分是一样的。

2. 注意上一条我们加粗的部分。因为是将剩余空间均匀分配在子widget之间，所以第一个子widge的前面和最后一个字widget后面是没有空间的，这是因为他们的左边和右边都是单独的。

3. 当只有2个子widget的时候，这2个子widget分别居左和居右，就是紧靠在父widget两边的。

   所以到了这里，我们应该就能很好的理解上一篇文章为什么能实现那样的效果了吧。因为我们只有2个子widget，就是第3条所说的，所以就有了相对父widget居左和居右的效果啦。

MainAxisAlignment.spaceAround

再来看看spaceAround的将自由空间均匀地放置在孩子之间，以及在第一个孩子和最后一个孩子之前和之后的一半空间，我才开始我没太理解这句话的意思，后面配合代码演示的效果，我终于理解了spaceAround的意思了。

1. 在父widget中，除去子widget所占据的空间，将剩余的空间均匀的分配在子widget之间，且第一个子widget的左边和最后一个子widget的右边也有均分分配空间的一半。
2. 与spaceBetween的区别就是，第一个子widget的左边和最后一个widget的右边也有一半的空间。

这种效果，我相信很多UI在作图的时候都喜欢用这种效果，多个view之间空白均等，第一个和最后一个view离屏幕边缘是均等空白的一般。下次遇到这样的UI设计，就用spaceAround就好啦😏😏😏。

MainAxisAlignment.spaceEvenly

最后一个就是spaceEvenly，意思是将自由空间均匀地放置在孩子之间以及第一个和最后一个孩子之前和之后，这个结合前面解释的俩个属性，和代码演示的效果，相信大家很容易就能理解。就是所有子widget之间以及加上第一个子widget的左边和最后一个子widget的右边，均分剩余的空间。简单理解就是子widget均分父widget，这个就类似Android中的LinearLayout的weight属性，给所有子view设置同样的比重，就是均等布局。以后遇到等比布局就可以使用spaceEvenly啦😊😊😊。

总结

通过对源码注释的解读，加上配合代码的效果，我相信大家应该理解了spaceBetween，spaceAround，spaceEvenly这三个值的意思了，这样以后我们再遇到不用的UI布局，使用Row的布局将会更加得心应手。再提醒一句，如果是在Column在设置这几个值，就是在竖直方向均匀分配，相信大家也很容易理解，我就不演示了。

实例源码地址

MainAxisAlignment的讲解我们就到这啦，如果文章有不对的地方，欢迎大家在评论中提出来，最后祝大家🐔你太美！！！