本文主要介紹Flutter中非常常見的Container，列舉了一些實際例子介紹如何使用。
1. 簡介
A convenience widget that combines common painting, positioning, and sizing widgets.
Container在Flutter中太常見了。官方給出的簡介，是一個結合了繪製（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
可以得出幾個資訊，它是一個組合的widget，內部有繪製widget、定位widget、尺寸widget。後續看到的不少widget，都是通過一些更基礎的widget組合而成的。
1.1 組成
Container的組成如下：
- 最裡層的是child元素；
- child元素首先會被padding包著；
- 然後新增額外的constraints限制；
- 最後新增margin。
Container的繪製的過程如下：
- 首先會繪製transform效果；
- 接著繪製decoration；
- 然後繪製child；
- 最後繪製foregroundDecoration。
Container自身尺寸的調節分兩種情況：
- Container在沒有子節點（children）的時候，會試圖去變得足夠大。除非constraints是unbounded限制，在這種情況下，Container會試圖去變得足夠小。
- 帶子節點的Container，會根據子節點尺寸調節自身尺寸，但是Container構造器中如果包含了width、height以及constraints，則會按照構造器中的引數來進行尺寸的調節。
1.2 佈局行為
由於Container組合了一系列的widget，這些widget都有自己的佈局行為，因此Container的佈局行為有時候是比較複雜的。
一般情況下，Container會遵循如下順序去嘗試佈局：
- 對齊（alignment）；
- 調節自身尺寸適合子節點；
- 採用width、height以及constraints佈局；
- 擴充套件自身去適應父節點；
- 調節自身到足夠小。
進一步說：
- 如果沒有子節點、沒有設定width、height以及constraints，並且父節點沒有設定unbounded的限制，Container會將自身調整到足夠小。
- 如果沒有子節點、對齊方式（alignment），但是提供了width、height或者constraints，那麼Container會根據自身以及父節點的限制，將自身調節到足夠小。
- 如果沒有子節點、width、height、constraints以及alignment，但是父節點提供了bounded限制，那麼Container會按照父節點的限制，將自身調整到足夠大。
- 如果有alignment，父節點提供了unbounded限制，那麼Container將會調節自身尺寸來包住child；
- 如果有alignment，並且父節點提供了bounded限制，那麼Container會將自身調整的足夠大（在父節點的範圍內），然後將child根據alignment調整位置；
- 含有child，但是沒有width、height、constraints以及alignment，Container會將父節點的constraints傳遞給child，並且根據child調整自身。
另外，margin以及padding屬性也會影響到佈局。
1.3 繼承關係
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
複製程式碼從繼承關係可以看出，Container是一個StatelessWidget。Container並不是一個最基礎的widget，它是由一系列的基礎widget組合而成。
2. 原始碼解析
建構函式如下：
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
複製程式碼平時使用最多的，也就是padding、color、width、height、margin屬性。
2.1 屬性解析
key：Container唯一識別符號，用於查詢更新。
alignment：控制child的對齊方式，如果container或者container父節點尺寸大於child的尺寸，這個屬性設定會起作用，有很多種對齊方式。
padding：decoration內部的空白區域，如果有child的話，child位於padding內部。padding與margin的不同之處在於，padding是包含在content內，而margin則是外部邊界，設定點選事件的話，padding區域會響應，而margin區域不會響應。
color：用來設定container背景色，如果foregroundDecoration設定的話，可能會遮蓋color效果。
decoration：繪製在child後面的裝飾，設定了decoration的話，就不能設定color屬性，否則會報錯，此時應該在decoration中進行顏色的設定。
foregroundDecoration：繪製在child前面的裝飾。
width：container的寬度，設定為double.infinity可以強制在寬度上撐滿，不設定，則根據child和父節點兩者一起佈局。
height：container的高度，設定為double.infinity可以強制在高度上撐滿。
constraints：新增到child上額外的約束條件。
margin：圍繞在decoration和child之外的空白區域，不屬於內容區域。
transform：設定container的變換矩陣，型別為Matrix4。
child：container中的內容widget。
2.2 一個例子
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: new BoxDecoration(
border: new Border.all(width: 2.0, color: Colors.red),
color: Colors.grey,
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
image: new DecorationImage(
image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: new Text('Hello World',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
transform: new Matrix4.rotationZ(0.3),
)
複製程式碼這是官方文件給出例子的一個變種，包含屬性比較全，可以看下其用法。實際執行效果如下：
其中decoration可以設定邊框、背景色、背景圖片、圓角等屬性，非常實用。對於transform這個屬性，一般有過其他平臺開發經驗的，都大致瞭解，這種變換，一般不是變換的實際位置，而是變換的繪製效果，也就是說它的點選以及尺寸、間距等都是按照未變換前的。
2.3 原始碼
decoration = decoration ?? (color != null ? new BoxDecoration(color: color) : null),
複製程式碼可以看出，對於顏色的設定，最後都是轉換為decoration來進行繪製的。如果同時包含decoration和color兩種屬性，則會報錯。
@override
Widget build(BuildContext context) {
Widget current = child;
if (child == null && (constraints == null || !constraints.isTight)) {
current = new LimitedBox(
maxWidth: 0.0,
maxHeight: 0.0,
child: new ConstrainedBox(constraints: const BoxConstraints.expand())
);
}
if (alignment != null)
current = new Align(alignment: alignment, child: current);
final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
if (effectivePadding != null)
current = new Padding(padding: effectivePadding, child: current);
if (decoration != null)
current = new DecoratedBox(decoration: decoration, child: current);
if (foregroundDecoration != null) {
current = new DecoratedBox(
decoration: foregroundDecoration,
position: DecorationPosition.foreground,
child: current
);
}
if (constraints != null)
current = new ConstrainedBox(constraints: constraints, child: current);
if (margin != null)
current = new Padding(padding: margin, child: current);
if (transform != null)
current = new Transform(transform: transform, child: current);
return current;
}
複製程式碼Container的build函式不長，繪製也是一個線性的判斷的過程，一層一層的包裹著widget，去實現不同的樣式。
最裡層的是child，如果為空或者其他約束條件，則最裡層包含的為一個LimitedBox，然後依次是Align、Padding、DecoratedBox、前景DecoratedBox、ConstrainedBox、Padding（實現margin效果）、Transform。
Container的原始碼本身並不複雜，複雜的是它的各種佈局表現。我們謹記住一點，如果內部不設定約束，則按照父節點儘可能的擴大，如果內部有約束，則按照內部來。
2.4 使用場景
Container算是目前專案中，最經常用到的一個widget。在實際使用過程中，筆者在以下情況會使用到Container，當然並不是絕對的，也可以通過其他widget來實現。
- 需要設定間隔（這種情況下，如果只是單純的間隔，也可以通過Padding來實現）；
- 需要設定背景色；
- 需要設定圓角或者邊框的時候（ClipRRect也可以實現圓角效果）；
- 需要對齊（Align也可以實現）；
- 需要設定背景圖片的時候（也可以使用Stack實現）。
3. 例子
接下來我們試著去做一個圓角按鈕，它包含以下特性：
- 支援設定按鈕的三種狀態（正常態、點選態、禁用態）的色值；
- 支援設定按鈕標題；
- 支援設定寬高；
- 支援點選回撥；
根據上面介紹，利用decoration這個屬性，基本上就可以完成效果了，至於點選效果以及點選回撥，則使用一個GestureDetector就可以完成了。實際的例子非常簡單，在這裡就不貼程式碼了。實際執行效果如下所示：
3.1 注意事項
這個小控制元件，寫起來很簡單，本身沒有什麼難度，只是純粹的介紹了Container的使用方法，但是有一個地方需要注意的。在控制元件的deactivate狀態，我們需要將控制元件的屬性初始到最開始的狀態，例如在本例中，有如下程式碼：
@override
void deactivate() {
super.deactivate();
currentColor = widget.backgroundColor;
}
複製程式碼這麼做是為什麼了？是因為在點選按鈕進行頁面跳轉的時候，按鈕處在點選態，當我們返回的時候，頁面還是處在點選態，這顯然就不正確了，因此需要我們手動的在deactivate狀態下，將控制元件恢復到初始狀態。但是呢，這個設定顏色，並不是說在deactivate的時候，就立馬去重新整理控制元件，而是在下次再進入這個頁面的時候，再次執行build的時候，會按照這個初始值進行繪製，也就是恢復到了最開始的狀態。
3.2 程式碼
程式碼Github地址，這是一個系列的專案，如果不出意外，會將Flutter中常見的二十多種佈局widget都介紹一下。
4. 後話
筆者建了一個flutter學習相關的專案，github地址，裡面包含了筆者寫的關於flutter學習相關的一些文章，會定期更新，也會上傳一些學習demo，歡迎大家關注。