Flutter中MainAxisAlignment和CrossAxisAlignment詳解

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: <Widget>[
          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: <Widget>[
          Box("1"),
          Box("2"),
          Box("3"),
        ],
      ),
    );

MainAxisAlignment.start
將子控件放在主軸的開始位置，默認值即爲start，verticalDirection的默認值爲VerticalDirection.down，也就是從上至下的方向

下面我們來修改verticalDirection的值爲up

 Column(
        mainAxisAlignment: MainAxisAlignment.start,
        verticalDirection: VerticalDirection.up,
        children: <Widget>[
          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: <Widget>[
          Box("1"),
          Box("2"),
          Box("3"),
        ],
      )

可以看到，交叉軸的排列方向修改爲從下至上，起始位置也變成了下方。下面其他的值效果類似，就不演示verticalDirection了

CrossAxisAlignment.center
將子控件放在交叉軸的中間位置，同樣的可以通過TextDirection來指定起始位置

CrossAxisAlignment.end
將子控件放在交叉軸的結束位置

CrossAxisAlignment.stretch

使子控件填滿交叉軸

在Column中CrossAxisAlignment的效果

Column(
        children: <Widget>[
          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就沒什麼問題了

如果你覺得本文對你有幫助，麻煩動動手指頂一下，算是對本文的一個認可。也可以關注我的 Flutter 博客專欄，我會不定期的更新，如果文中有什麼錯誤的地方，還望指正，轉載請註明轉自喻志強的博客 ，謝謝！