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的講解咱們就到這啦，若是文章有不對的地方，歡迎你們在評論中提出來，最後祝你們🐔你太美！！！