昨天我們講了佈局元件(對岸的朋友是翻成組件, 我自己是習慣講元件)
今天我們來講講類似的概念：容器元件
我個人的理解：這兩種Widget都是為了子Widget而生的
只是佈局類是為了排版(通常都是繼承自MultiChildRenderObjectWidget)
而容器類是為了修飾(像今天的內容除了Container, 都是繼承自SingleChildRenderObjectWidget)

1. Align

(其實根據定義, Align應該比較像是佈局類才對... 不管了XD)
昨天提到重疊時可以用Stack
另外還有Align也可以派上用場
最大差別在於Stack可以有多個子widget

除了alignment屬性以外
Align還有widthFactor/heightFactor
可以根據child的大小決定Align的大小
如果factor是null, 就會盡量放大空間

而Center Widget是Align Widget的一個特例
代表alignment屬性就是center

2. Padding

這應該是最單純的Widget了
就是透過EdgeInsets留邊距
EdgeInsets可以用.all一次全部指定四邊間距
也可以用.symmetric指定一組對稱間距

3. DecoratedBox

這個就是我覺得Flutter相較以前有點麻煩的地方⚠️⚠️⚠️
以前所有的View都是UIView
都有backgroundColor可以用
但現在Widget是沒有backgroundColor的
要給它底色的話
就必須再包一層DecoratedBox或等等會提到的Container
(而且就我所知, Flutter沒有視覺化工具⚠️⚠️⚠️, 所以滿常需要上色來輔助debug)

DecoratedBox有兩個屬性
position決定作用在前景或後景
decoration的話就直接給BoxDecoration(倒裝句？)
BoxDecoration可以實現一些以前要在UIView.layer才能做的事
比較常見的有陰影/邊線/圓角
但是圓角要注意！⚠️⚠️⚠️
如果00000000000000000000是我們要裝飾的widget
因為DecoratedBox是加一層東西在子widget的前面或後面
所以會變成這樣(foreground)

或這樣(background)

解決方式是
把我們真的要做圓角的widget用ClipRRect包起來

4. 尺寸類容器

4.1 ConstrainedBox

看到constraint有沒有很興奮啊？XD
這個Widget可以透過BoxConstraints限制child的minWidth, maxWidth, minHeight, maxHeight

4.2 SizedBox

就是ConstrainedBox的一個特例(min = max)
固定大小的意思

4.3 多重限制

1. 如果ConstrainedBox後沒有效果, 基本上就是父widget已經有限制了
2. UnconstrainedBox可以用來去除父widget的限制(子widget不會被拉伸, 但還是會留白)

4.4 其他尺寸類

1. AspectRatio設定長寬比
2. FractionallySizedBox根據父widget的寬高來設定大小比例

5. Container(繼承自StatelessWidget)

Container就是Flutter裡的要你命三千瑞士刀
它提供了很多前面我們所提到的功能
其實它本身並不是一個RenderObject
而是一個便利的組合型widget
其中的margin和padding屬性很容易搞混(就是我)
marging是指Container跟外面的距離
padding是指Container跟內部的距離

參考連結

• Flutter實戰第五章：容器類組件

下集預告：文字與輸入