[Flutter] 物件引導 – 排版 002 – Linear Layout

1. 主軸與縱軸

在 Linear Layout 中，物件拓展的方向為主軸（Main-Axis），而與之垂直是縱軸（Cross-Axis）。那在後續的對齊方式，就可以依靠所使用的物件，判斷動用哪個軸進行排列。

2. Linear Layout 的物件

屬於這類排版方式的物件有 Row（橫向）與 Column（縱向）兩種，而其特徵便是同一群組的物件會朝同一方向排版（並可能造成 overflow 問題），並且由於是種群組，因此其使用的不是 child 而是 children。

3. 共通的屬性

兩者主要所共通的便是軸的對齊方式，那這邊會利用 Row 與 Column 做兩種示範

3.1 主軸與縱軸

我們前面有提到主軸與縱軸的判斷方式，那這邊就簡單呈現給各位。在所有的容器中都擁有三顆按鈕，而在上方的 Row 統一使用 MainAxisAlignment，下方的 Column 則使用了 CrossAxisAlignment，可以看到在下方使用的還是左右的對齊，簡單證明兩個方式的軸向是相反的。

那在對齊我們通常會使用到也只有 start, center, end 這三種格式。

3.2 同軸間距

但除了基本的靠邊對齊外，Flutter 同時有提供三種方法提供不同的物件間距。那下圖依序是 sapceBetween, spaceAround 與 spaceEvenly。那第一種就只在物件中間新增間距。第二種呢，左右兩邊是中間間距的 1/2。最後，第三種則是左有與中間都等距，也是最常見的一種。

4. 多層的架構

在 3.1 之中，其實早已是個大 Column 包著所有物件，但我們知道在預設中，區塊只會以其內容物的大小自動擴張。此時，我們就要依靠 Expanded 物件，來達成這項工作。