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翻译的结果：

看过翻译以后，貌似明朗不少。而后咱们再配合代码的效果来理解这个属性，效果是这样的：

我分别演示了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的讲解咱们就到这啦，若是文章有不对的地方，欢迎你们在评论中提出来，最后祝你们🐔你太美！！！