前言

我們在上一篇文章中，通過兩種方式解決了，子widget相對父布局居左和居右。第二種方式是通過Row中的MainAxisAlignment屬性實現(xiàn)的，代碼非常簡單，大家可以去上一篇文章中看看。這篇文章我們將詳細講解MainAxisAlignment這個屬性里面值得含義，為什么會能完成我們上一篇的效果。當然這個屬性不是Row特有，Column中也有，只不過Row的主軸是水平方向上面的，Column是豎直方向上的。MainAxisAlignment屬性就是代表主軸方向的對齊方式。本文我們將以Row為例來講解，Columu其實也是一樣的意思，只不過方向不一樣。好的，下面我們進入正題。

正文

MainAxisAlignment里面一共有6個值，分別是start，center，end，spaceBetween，spaceAround，spaceEvenly；前三個相信大家很容易理解，我們重點講解后面三個值的效果。上一篇我已經(jīng)留下這三個屬性的源碼注釋了，不知道大家有沒有理解，我們再來看一次：

// 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

翻譯.png

看過翻譯之后，貌似明朗很多。然后我們再配合代碼的效果來理解這個屬性，效果是這樣的：

mainAxisAlignment.png

我分別演示了Row中包含2個，3個，4個子widget的效果，更有對比性，可以讓大家更好的理解這三個屬性。下面我們來一個個解釋這些值的含義：

MainAxisAlignment.spaceBetween

我們先來看看spaceBetween，源碼注釋給的意思是將自由空間均勻放置在孩子之間，配合我們代碼演示的效果。我們可以知道spaceBetween的作用應(yīng)該是：

1. 在父widget中，除去子widget所占據(jù)的空間，將剩余的空間均勻的分配在子widget之間，所以我們看到圖上每個widget之間的空白部分是一樣的。

2. 注意上一條我們加粗的部分。因為是將剩余空間均勻分配在子widget之間，所以第一個子widge的前面和最后一個字widget后面是沒有空間的，這是因為他們的左邊和右邊都是單獨的。

3. 當只有2個子widget的時候，這2個子widget分別居左和居右，就是緊靠在父widget兩邊的。

   所以到了這里，我們應(yīng)該就能很好的理解上一篇文章為什么能實現(xiàn)那樣的效果了吧。因為我們只有2個子widget，就是第3條所說的，所以就有了相對父widget居左和居右的效果啦。

MainAxisAlignment.spaceAround

再來看看spaceAround的將自由空間均勻地放置在孩子之間，以及在第一個孩子和最后一個孩子之前和之后的一半空間，我才開始我沒太理解這句話的意思，后面配合代碼演示的效果，我終于理解了spaceAround的意思了。

1. 在父widget中，除去子widget所占據(jù)的空間，將剩余的空間均勻的分配在子widget之間，且第一個子widget的左邊和最后一個子widget的右邊也有均分分配空間的一半。
2. 與spaceBetween的區(qū)別就是，第一個子widget的左邊和最后一個widget的右邊也有一半的空間。

這種效果，我相信很多UI在作圖的時候都喜歡用這種效果，多個view之間空白均等，第一個和最后一個view離屏幕邊緣是均等空白的一般。下次遇到這樣的UI設(shè)計，就用spaceAround就好啦??????。

MainAxisAlignment.spaceEvenly

最后一個就是spaceEvenly，意思是將自由空間均勻地放置在孩子之間以及第一個和最后一個孩子之前和之后，這個結(jié)合前面解釋的倆個屬性，和代碼演示的效果，相信大家很容易就能理解。就是所有子widget之間以及加上第一個子widget的左邊和最后一個子widget的右邊，均分剩余的空間。簡單理解就是子widget均分父widget，這個就類似Android中的LinearLayout的weight屬性，給所有子view設(shè)置同樣的比重，就是均等布局。以后遇到等比布局就可以使用spaceEvenly啦??????。

總結(jié)

通過對源碼注釋的解讀，加上配合代碼的效果，我相信大家應(yīng)該理解了spaceBetween，spaceAround，spaceEvenly這三個值的意思了，這樣以后我們再遇到不用的UI布局，使用Row的布局將會更加得心應(yīng)手。再提醒一句，如果是在Column在設(shè)置這幾個值，就是在豎直方向均勻分配，相信大家也很容易理解，我就不演示了。

實例源碼地址

MainAxisAlignment的講解我們就到這啦，如果文章有不對的地方，歡迎大家在評論中提出來，最后祝大家??你太美?。。?/p>