## 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!"), ), ), ... ```