## Container
Container是我們要介紹的最后一個容器類widget,它本身不對應具體的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等widget的一個組合widget。所以我們只需通過一個Container可以實現同時需要裝飾、變換、限制的場景。下面是Container的定義:
```
Container({
this.alignment,
this.padding, //容器內補白,屬于decoration的裝飾范圍
Color color, // 背景色
Decoration decoration, // 背景裝飾
Decoration foregroundDecoration, //前景裝飾
double width,//容器的寬度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制條件
this.margin,//容器外補白,不屬于decoration的裝飾范圍
this.transform, //變換
this.child,
})
```
大多數屬性在介紹其它容器時都已經介紹過了,不再贅述,但有兩點需要說明:
- 容器的大小可以通過`width`、`height`屬性來指定,也可以通過`constraints`來指定,如果同時存在時,`width`、`height`優先。實際上Container內部會根據`width`、`height`來生成一個`constraints`。
- `color`和`decoration`是互斥的,實際上,當指定color時,Container內會自動創建一個decoration。
### 實例
我們通過Container來實現如下的卡片:

代碼:
```
Container(
margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外補白
constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
decoration: BoxDecoration(//背景裝飾
gradient: RadialGradient( //背景徑向漸變
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98
),
boxShadow: [ //卡片陰影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0
)
]
),
transform: Matrix4.rotationZ(.2), //卡片傾斜變換
alignment: Alignment.center, //卡片內文字居中
child: Text( //卡片文字
"5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
),
);
```
可以看到Container通過組合多種widget來實現復雜強大的功能,在Flutter中,這也正是組合優先于繼承的實例。
### Padding和Margin
接下來我們看看Container的`margin`和`padding`屬性的區別:
```
...
Container(
margin: EdgeInsets.all(20.0), //容器外補白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器內補白
color: Colors.orange,
child: Text("Hello world!"),
),
...
```

可以發現,直觀的感覺就是margin的補白是在容器外部,而padding的補白是在容器內部,讀者需要記住這個差異。事實上,Container內`margin`和`padding`都是通過Padding widget來實現的,上面的示例代碼實際上等價于:
```
...
Padding(
padding: EdgeInsets.all(20.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Text("Hello world!"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world!"),
),
),
...
```
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示