注意：無特殊說明，F(xiàn)lutter版本及Dart版本如下：
- Flutter版本： 1.12.13+hotfix.5
- Dart版本： 2.7.0
Container將會是我們以后最常用的控件之一，Container是單容器類控件，即只包含一個子控件。Container可以裝飾和定位子控件，例如設置背景顏色、形狀等。
無任何參數(shù)設置
如果只用Container包裝子控件而沒有任何其他參數(shù)的設置，代碼如下：
Container(
child: Text('老孟'),
)
Container內的子控件不會發(fā)生任何外觀上的變化，效果如下：
設置背景顏色
如果想要給子控件添加背景顏色可以使用color屬性，代碼如下：
Container(
color: Colors.blue,
child: Text('老孟'),
)
效果如下：
沒有其他參數(shù)設置時，Container將會根據(jù)子控件自行調整大小。
padding 和 margin
如果想在Container和子元素之間添加空白可以使用padding屬性，代碼如下：
Container(
color: Colors.blue,
child: Text('老孟'),
padding: EdgeInsets.all(20),
)
效果如下：
margin的用法和padding一樣，padding表示內邊距，margin表示外邊距。
Decoration 裝飾
decoration屬性可以設置子控件的背景顏色、形狀等。設置背景為圓形，顏色為藍色，代碼如下：
Container(
child: Text('老孟，一個有態(tài)度的程序員'),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue
),
)
效果如下：
默認情況下，圓形的直徑等于Container的窄邊長度，相當于在矩形內繪制內切圓。
上面的情況明顯不是我們希望看到了，太丑了，我們希望背景是圓角矩形，代碼如下：
Container(
child: Text('老孟，一個有態(tài)度的程序員'),
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue
),
)
效果如下：
這就好看多了嗎。
除了背景我們可以設置邊框效果，代碼如下：
Container(
child: Text('老孟，一個有態(tài)度的程序員'),
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.blue,
width: 2,
),
),
)
效果如下：
我們也可以通過此方式創(chuàng)建圓角圖片和圓形圖片，代碼如下：
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.blue,
width: 2,
),
borderRadius: BorderRadius.circular(12),
),
)
效果如圖：
修改其形狀為圓形，代碼如下：
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.blue,
width: 2,
),
shape: BoxShape.circle,
),
)
效果如圖：
Alignment 對齊方式
<font color='red'>注意：設置對齊方式后，Container將會充滿其父控件，相當于Android中match_parent,不在是根據(jù)子控件調整大小</font>
設置對齊方式為居中，背景色為藍色，代碼如下：
Container(
color: Colors.blue,
child: Text('老孟，一個有態(tài)度的程序員'),
alignment: Alignment.center,
)
效果如下：
通過背景色可以看出Container充滿其父控件。
寬、高、約束寬高
我們也可以設置固定的寬高屬性，代碼如下：
Container(
color: Colors.blue,
child: Text('老孟，一個有態(tài)度的程序員'),
alignment: Alignment.center,
height: 60,
width: 200,
)
效果如圖：
還可以通過constraints屬性設置最大/小寬、高來確定大小，constraints如果不設置，默認最小寬高是0，最大寬高是無限大（double.infinity），約束width代碼如下：
Container(
color: Colors.blue,
child: Text('老孟，一個有態(tài)度的程序員'),
alignment: Alignment.center,
constraints: BoxConstraints.tightForFinite(
width: 200
),
)
效果如圖：
transform 變換
通過transform可以旋轉、平移、縮放Container，旋轉代碼如下：
Container(
color: Colors.blue,
child: Text('老孟，一個有態(tài)度的程序員'),
alignment: Alignment.center,
height: 60,
width: 200,
transform: Matrix4.rotationZ(0.5),
)
<font color='red'>注意：Matrix4.rotationZ()參數(shù)的單位是弧度而不是角度</font>
效果如圖：
