A convenience widget that combines common painting(繪製), positioning(定位), and sizing(大小) widgets.
它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等Widget組合的多功能容器，我們只需通過它便可實现同時需要裝飾、變換、限制的場合。
- 容器的基本佈局
Container常用參數
| 參數 | 說明 |
|---|---|
| alignment | 對齊，可使用Alignment.center等值 |
| padding | 容器內的填充值 |
| margin | 容器外的邊界值 |
| width、height | 寬度與高度 |
| color | 容器背景色，不能和decoration並存 |
| decoration | 繪製child之背景部份的裝飾 |
| foregroundDecoration | 繪製child之前景的裝飾 |
| constraints | 容器大小的限制條件 |
| transform | 設容器的變換矩陣，型別是Matrix4 |
| child | 容器的內容 |
decoration參數經常使用BoxDecoration class。
BoxDecoration
BoxDecoration提供了多種繪製盒子的方法。
BoxDecoration常用參數
| 參數 | 說明 |
|---|---|
| color | 背景色 |
| backgroundBlendMode | 背景混合模式 |
| border | 邊框；Border.all(Colors.red) |
| borderRadious | 圓角角度 |
| boxShadow | 陰影; List [BoxShadow] |
| shape | Box的形狀(圓或方) |
| gradient | 漸層效果；LinearGradient(), RadialGradient |
| image | 背景圖；DecorationImage |
逐次添加Container的多個參數
- 先加color使容器易於觀察
- 加上容器的寬和高
- 讓子物件對齊（alignment）
- 加上邊界（margin）移動容器之位置
- 加上填充（padding）讓子物件移動位置
- 用transform旋轉容器
- 用Center置中容器
- 最後用decoration來裝飾：
- decoration與color不能同時存在，因此先刪去color
- 加上邊框（Border.all）
- 變更為圓角矩形（borderRadius）
- 加上color為背景色
- 變更為漸層背景色
- 加上陰影
- 加上容器的背景圖片
Flutter載入本機圖檔的寫法
- 本地圖檔使用AssetImage
image: DecorationImage(
image: AssetImage("assets/images/flutter-demo7.png"),
fit: BoxFit.contain,
),
- 遠端圖檔使用
image: DecorationImage(
image: NetworkImage("https://flutter.dev/images/flutter-mono-81x100.png"),
fit: BoxFit.none,
),
- 外部資源設定
外部資源必須在 pubspec.yaml 設定檔裡設置。- 將圖檔複製到專案根目錄下的 assests/images (目錄自訂)
- 搜尋pubspec.yaml assets設定，修改如下：
assets:
- assets/images/
- IDEA的pubspec.yaml分頁偵測到變更後，點選upgrade
demo9_container_test.dart
解說影片
＃＃
您可能也會有興趣的類似文章
- 02. 用IDEA快速建立第一支Flutter程式 (0則留言, 2019/09/19)
- 07. 學習Flutter Widget的4個教學App (0則留言, 2019/10/06)
- 08. 成功組建由GitHub複製Flutter專案的關鍵步驟 (0則留言, 2019/10/10)
- 03. 更多的Flutter範例：StatelessWidget、StatefulWidgett與其他Widgets (0則留言, 2019/09/21)
- IntelliJ IDEA與括號相關的操作並介紹括號識別外掛：Rainbow Brackets (0則留言, 2019/09/22)
- 05. Flutter的學習輔助應用程式：FlutterGo (0則留言, 2019/09/28)
- 01. 使用IntelliJ IDEA開發Flutter App：開發環境設置 (0則留言, 2019/09/15)
- 06. Flutter AlertDialog對話窗Widget使用重點 (0則留言, 2019/09/29)
- 04. 使用第三方Android模擬器來執行Android/Flutter App (0則留言, 2019/09/27)
- Xuite日誌的日曆樣式變更 (3則留言, 2007/05/29)
- [Java] 在jar檔裡搜尋特定類別的工具 (0則留言, 2007/09/03)
- TiddlyWiki: 增加第二組編輯區工具列 (0則留言, 2007/08/15)
- 使用TiddlyWiki做為Blog的書寫工具 (1則留言, 2007/11/17)
- TiddlyWiki文件格式 (0則留言, 2007/08/08)
- TiddlyWiki:「所見即所得」式的編輯插件 (2則留言, 2007/08/17)