我認為學習前端技術的第一步
都是先了解如何layout
再去學習各個Components的特性
接著再逐漸擴展到其他功能(例如打API之類的)
而Flutter的layout跟iOS不太一樣
我感覺以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊
接下來就介紹幾種最常用的佈局

1. Column/Row(繼承自Flex)

就是以前的UIStackView☘️☘️☘️
也是Android的linear layout
只不過Row是水平排列, Column是垂直排列
我老是覺得應該相反= =
(是不是cellForRow的影響太深了XD)

• 首先介紹mainAxisSize
  代表在主軸的高/寬度,
  如果是max; 代表跟父widget一樣大,
  如果是min, 代表跟子widget一樣大;
  所以當max時(預設), 下面的mainAxisAlignment才有意義
• mainAxisAlignment 跟 crossAxisAlignment 屬性
  決定了主軸跟交軸的對齊方式
  (但是要注意Dart的enum不能直接 .center, 必須顯式指定型別MainAxisAlignment.center)
• textDirection 跟 verticalDirection 的方向
  是預設左到右(中文環境裡), 上到下
  
  

2. Expanded(繼承自Flexible)

通常在Column/Row內使用
可以將子widget所佔空間彈性延伸
有個flex屬性可以決定要佔主軸剩餘空間的多少比例
預設為1, 就有點像我們以前要跟SuperView上下左右貼齊的感覺☘️☘️☘️
如下圖四個widget的flex為1, 2, 3, 4

3. Stack(繼承自MultiChildRenderObjectWidget)

這個反而不是以前的StackView喔!!
而是真的像疊盤子那樣的stack
然後它竟然還有一個屬性叫做overflow XDDDDD
Overflow.clip時(預設)，超出部分會被剪裁，Overflow.visible則不會

然後重疊位置與大小, 分為子widget有無用Positioned包起來
若無就交給alignment 跟 fit 去決定
例如下圖就是預設為對齊左上, 大小不延伸成跟StackView一樣

若用Positioned
就可以指定跟StackView的上下左右距離
需注意上下高 跟 左右寬, 兩組屬性中
每組中最多只能指定其中兩個屬性, 剩下一個Flutter幫您算
若同時指定三個會報錯

最後，children裡index越後面的widget就在越上面

4. Widget的分類

1. LeafRenderObjectWidget = 沒有子Widget的, 例如: Image
2. SingleChildRenderObjectWidget = 只有一個子Widget的, 例如: DecoratedBox
3. MultiChildRenderObjectWidget = 可以很多子Widget的, 例如: 上面提到的Stack

參考連結

• Flutter實戰第四章：佈局類組件

本集內容Android版請見：iOS Developer Learning Android. Lesson 07

下集預告：容器元件

最後提供一下github.com/mark33699/IDLF