作者 | 弗拉德 來源 | 弗拉德（公眾號：fulade_me) ### Container 我們先來看一下Container初始化的引數： ``` dart Container({ Key key, // 位置 居左、居右、居中 this.alignment, // EdgeInsets Container的內邊距 this.padding, // 背景顏色 this.color, // 背景裝飾器 this.decoration, // 前景裝飾器 this.foregroundDecoration, // 寬度 double width, // 告訴 double height, // 約束 BoxConstraints constraints, // EdgeInsets Container的外邊距 this.margin, // 旋轉 this.transform, // 子控制元件 this.child, // 裁剪Widget的模式 this.clipBehavior = Clip.none, }) ``` **注意：** - `Container` 的`color`屬性與屬性 `decoration`的`color`存在衝突，如果兩個`color`都做了設定，預設會以`decoration`的`color`為準。 - 如果我們沒有給`Container`設定`width`和`height`，`Container`會跟`child`的大小一樣；假如我們沒有設定`child`的時候，它的尺寸會極大化，儘可能的充滿它的`父Widget`。 **1. 最簡單的Container** ``` dart Container( child: Text("Fulade"), color: Colors.red, ) ``` Container接收一個`child`引數，我們可以傳入`Text`作為`child`引數,然後傳入是一個顏色。  **2. Padding** ``` dart Container( child: Text("Pading 10"), padding: EdgeInsets.all(10), color: Colors.blue, ) ``` `Padding`是內邊距，我們在這裡設定了`padding: EdgeInsets.all(10)`，也就是說`Text`距離`Container`的四條邊的邊距都是10。  **3. Margin** ``` dart Container( child: Text("Margin 10"), margin: EdgeInsets.all(10), color: Colors.green, ) ``` `Margin`是外邊距，我們在這裡設定了`margin: EdgeInsets.all(10)`，`Container`在原有大小的基礎上，又被**包圍**了一層寬度為10的矩形。 需要注意，綠色外圍的白色區域也是屬於`Container`的一部分。  **4. transform** ``` dart Container( padding: EdgeInsets.symmetric(horizontal: 15), margin: EdgeInsets.all(10), child: Text("transform"), transform: Matrix4.rotationZ(0.1), color: Colors.red, ) ``` `transform`可以幫助我們做旋轉，`Matrix4`給我們提供了很多的變換樣式。  **5. decoration** `decoration`可以幫助我們實現更多的效果。例如形狀、圓角、邊界、邊界顏色等。 ``` dart Container( child: Text("Decoration"), padding: EdgeInsets.symmetric(horizontal: 15), margin: EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.red, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(5)), ), ) ```  這裡就是設定了一個圓角的示例，同樣我們對`BoxDecoration`的`color`屬性設定顏色，對整個`Container`的也是有效的。 **6. 顯示 Image** ``` dart Container( height: 40, width: 100, margin: EdgeInsets.all(10), decoration: BoxDecoration( image: DecorationImage( image: AssetImage("images/flutter_icon_100.png"), fit: BoxFit.contain, ), ), ) ``` `BoxDecoration`可以傳入一個`Image`物件，這樣就靈活了很多，`Image`可以來自本地也可以來自網路。  **7. Border** ``` dart Container( child: Text('BoxDecoration with border'), padding: EdgeInsets.symmetric(horizontal: 15), margin: EdgeInsets.all(5), decoration: BoxDecoration( borderRadius: BorderRadius.circula(12), border: Border.all( color: Colors.red, width: 3, ), ), ) ``` 使用`border`可以幫助我們做邊界效果，還可以設定圓角`borderRadius`，也可以設定`border`的寬度，顏色等。  **8. 漸變色** ``` dart Container( padding: EdgeInsets.symmetric(horizontal: 20), margin: EdgeInsets.all(20), //容器外填充 decoration: BoxDecoration( gradient: RadialGradient( colors: [Colors.blue, Colors.black, Colors.red], center: Alignment.center, radius: 5 ), ), child: Text( //卡片文字 "RadialGradient", style: TextStyle(color: Colors.white), ), ) ``` `BoxDecoration`的屬性`gradient`可以接收一個顏色的陣列，`Alignment.center`是漸變色開始的位置，可以從`左上角`、`右上角`、`中間`等位置開始顏色變化。  想體驗以上的`Container`的示例的執行效果，可以到[我的Github倉庫](https://github.com/Johnson8888/learn_flutter)專案`flutter_app`->`lib`->`routes`->`container_page.dart`檢視，並且可以下載下來執行並體驗。 *** ![公眾號](https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/page_foot