Flutter 中的Container，其本質就是一個容器，相當於HTML中的div標籤
佈局行為
Container的佈局行為有時候是比較複雜的
一般情況下，Container會遵循如下順序去嘗試佈局：
- 對齊（alignment）；
- 調節自身尺寸適合子節點；
- 採用width、height以及constraints佈局；
- 擴充套件自身去適應父節點；
- 調節自身到足夠小。
原始碼示例
建構函式如下：
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
複製程式碼屬性解釋
key
Container 唯一識別符號，用於查詢更新。
alignment
控制child的對齊方式，如果container或者container的父節點尺寸大於child的尺寸，這個屬性設定會起作用，有很多種對齊方式。
例如：
alignment: Alignment.center則是居中對齊等等
padding
decoration內部的空白區域，如果有child的話，child位於padding內部。padding與margin的不同之處在於，padding是包含在content內，而margin則是外部邊界，設定點選事件的話，padding區域會響應，而margin區域不會響應。
例如：
padding: EdgeInsets.all(10)則是內邊距留白10px
margin
圍繞在decoration和child之外的空白區域，不屬於內容區域。
例如：
margin: EdgeInsets.only(top: 10)則是內容外邊距只有上面留白10px
color
用來設定container背景色，如果foregroundDecoration設定的話，可能會遮蓋color效果。
foregroundDecoration
繪製在child前面的裝飾。
width
container的寬度，設定為double.infinity可以強制在寬度上撐滿，不設定，則根據child和父節點兩者一起佈局。
height
container的高度，設定為double.infinity可以強制在高度上撐滿。
constraints
新增到child上額外的約束條件。
transform
設定container的變換矩陣，型別為Matrix4。
child
container中的內容widget。
decoration(詳解)
繪製在child後面的裝飾，設定了decoration的話，就不能設定color屬性，否則會報錯，此時應該在decoration中進行顏色的設定。
四類：
- BoxDecoration:實現邊框、圓角、陰影、形狀、漸變、背景影象
- ShapeDecoration:實現四個邊分別指定顏色和寬度、底部線、矩形邊色、圓形邊色、體育場（豎向橢圓）、 角形（八邊角）邊色
- FlutterLogoDecoration:實現Flutter圖片
- UnderlineTabindicator:下劃線
BoxDecoration
構造方法：
const BoxDecoration({
this.color, // 底色
this.image, // 圖片
this.border, 邊色
this.borderRadius, // 圓角度
this.boxShadow, // 陰影
this.gradient, // 漸變
this.backgroundBlendMode, // 混合Mode
this.shape = BoxShape.rectangle, // 形狀
})
複製程式碼示例：
邊框+圓角
decoration: new BoxDecoration(
border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 邊色與邊寬度
color: Color(0xFF9E9E9E), // 底色
// borderRadius: new BorderRadius.circular((20.0)), // 圓角度
borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可設定一邊圓角大小
),
複製程式碼陰影
decoration: new BoxDecoration(
border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 邊色與邊寬度
// 生成倆層陰影，一層綠，一層黃， 陰影位置由offset決定,陰影模糊層度由blurRadius大小決定（大就更透明更擴散），陰影模糊大小由spreadRadius決定
boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0), blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],
),
複製程式碼形狀（圓形與矩形）
decoration: new BoxDecoration(
border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 邊色與邊寬度
color: Color(0xFF9E9E9E), // 底色
// shape: BoxShape.circle, // 圓形，使用圓形時不可以使用borderRadius
shape: BoxShape.rectangle, // 預設值也是矩形
borderRadius: new BorderRadius.circular((20.0)), // 圓角度
),
複製程式碼漸變（環形、掃描式、線性）
decoration: new BoxDecoration(
border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 邊色與邊寬度
// 環形渲染
gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
//掃描式漸變
// gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
// 線性漸變
// gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))
),
複製程式碼背景影象
decoration: new BoxDecoration(
border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 邊色與邊寬度
image: new DecorationImage(
image: new NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'), // 網路圖片
// image: new AssetImage('graphics/background.png'), 本地圖片
fit: BoxFit.fill // 填滿
// centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小
),
),
複製程式碼ShapeDecoration
構造方法 ：
const ShapeDecoration({
this.color,
this.image,
this.gradient,
this.shadows,
@required this.shape,
})
複製程式碼示例：
除了shape，其他與BoxDecoration一致，shape：
decoration: new ShapeDecoration(
color: Color(0xFFFF00FF), // 底色
// 統一四邊顏色和寬度
shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
// 四個邊分別指定顏色和寬度， 當只給bottom時與UnderlineInputBorder一致效果
// shape: Border(top: b, bottom: b, right: b, left: b)
// 底部線
// shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 矩形邊色
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 圓形邊色
// shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
// 體育場（豎向橢圓）
// shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
// 角形（八邊角）邊色
// shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
),
複製程式碼FlutterLogoDecoration
構造方法：
const FlutterLogoDecoration({
this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]
this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]
this.textColor = const Color(0xFF616161),
this.style = FlutterLogoStyle.markOnly,
this.margin = EdgeInsets.zero,
})
複製程式碼Flutter的logo，沒啥用！
UnderlineTabindicator
構造方法：
const UnderlineTabIndicator({
this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
this.insets = EdgeInsets.zero,
})
複製程式碼示例：
加下劃線，可以設定Insets值（控制下劃高底，左右邊距）
decoration: new UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: Colors.white),
insets: EdgeInsets.fromLTRB(0,0,0,10)
),
複製程式碼