官方簡(jiǎn)介中，說(shuō) Container 組件是一個(gè)方便繪制、定位和調(diào)整子組件大小的組件。
首先 Container 會(huì)在 child 子組件周圍填充 padding（包括 decoration 中存在的 border），然后會(huì)根據(jù)約束 constraints 來(lái)決定子組件的寬高，最后 Container 會(huì)根據(jù) margin 來(lái)添加周圍的空白空間。
在繪制過(guò)程中，Container 先會(huì)應(yīng)用矩陣變換 transform，然后繪制 decoration，然后繪制 child 子組件，最后繪制 foregroundDecoration。
Container 如果沒有子組件的話會(huì)嘗試盡可能地大，除非傳入的約束 constraints 是無(wú)限的，如果是這種情況，Container 會(huì)盡可能地小。Containers with children size themselves to their children. The?width,?height, and?constraints?arguments to the constructor override this.（這句話看不懂了，T_T）。
總的來(lái)說(shuō)，Container 是一種很常用的組件，我們可以用它來(lái)包裹任意組件，之前說(shuō)Text 組件里面設(shè)置 backgroundColor 會(huì)讓有的文字顯示有問(wèn)題，如果用 Container 來(lái)包裹 Text 再設(shè)置背景就很方便了，而且包括圓角等樣式都可以輕松設(shè)置，再也不用 Android 那樣定義許多大同小異的 xml 了。
1 構(gòu)造方法
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child })
Container 只有這一個(gè)構(gòu)造方法，并沒有必傳的參數(shù)，但是一般我們都會(huì)用它來(lái)包裹子組件，也就是一般都會(huì)設(shè)置 child 屬性。
2 常用屬性
width 和 height：寬和高，這個(gè)不用贅述。
color：背景色，值為一個(gè) Color 對(duì)象，不能與 decoration 屬性同時(shí)設(shè)置。
margin：外邊距，值為一個(gè) EdgeInsets 對(duì)象。EdgeInsets 對(duì)象即可調(diào)用EdgeInsets.all() 方法統(tǒng)一設(shè)置左上右下四條邊的邊距，也可以調(diào)用 EdgeInsets.fromLTRB() 分別設(shè)置左上右下四條邊的邊距。
padding：內(nèi)間距，值同 margin。
alignment：對(duì)齊方式，可選值（看字面意思就很好理解）有：
??? ?Alignment.topLeft：垂直靠頂部水平靠左對(duì)齊。
?? ?Alignment.topCenter：垂直靠頂部水平居中對(duì)齊。
?? ?Alignment.topRight：垂直靠頂部水平靠右對(duì)齊。
?? ?Alignment.centerLeft：垂直居中水平靠左對(duì)齊。
?? ?Alignment.center：垂直和水平居中都對(duì)齊。
?? ?Alignment.centerRight：垂直居中水平靠右對(duì)齊。
?? ?Alignment.bottomLeft：垂直靠底部水平靠左對(duì)齊。
?? ?Alignment.bottomCenter：垂直靠底部水平居中對(duì)齊。
?? ?Alignment.bottomRight：垂直靠底部水平靠右對(duì)齊。
?? ?除了上面的常量之外，還可以創(chuàng)建 Alignment 對(duì)象指定 x、y 偏移量。
decoration：裝飾，背景邊框等，不能與 color 屬性同時(shí)設(shè)置，會(huì)繪制在 child 之下，也就是會(huì)被 child 覆蓋，具體 API?參考 2.1
BoxDecoration。
foregroundDecoration：也是裝飾，但是會(huì)繪制在 child 之上，也就是會(huì)覆蓋 child。
constraints：約束，這個(gè)規(guī)則貌似挺復(fù)雜的，后面詳細(xì)研究。
transform：形狀變換，這個(gè)用得應(yīng)該比較少，可能會(huì)在做動(dòng)畫的時(shí)候用到，后面詳細(xì)研究。
child：子組件。
2.1 BoxDecoration
首先 BoxDecoration 只是 Decoration 的一個(gè)實(shí)現(xiàn)類，其他實(shí)現(xiàn)類還有?FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator，這里只是介紹一下常用的?BoxDecoration。
color：背景填充顏色，值為一個(gè) Color 對(duì)象。
border：值為一個(gè) BoxBorder 對(duì)象，該對(duì)象可以設(shè)置邊框顏色、邊框?qū)挾?、邊框樣式等?/p>
borderRadius：邊框圓角，可以調(diào)用 BorderRadius.all() 統(tǒng)一設(shè)置四個(gè)角的圓角，也可以調(diào)用 BorderRadius.only() 分別設(shè)置四個(gè)角的圓角。
gradient：設(shè)置成漸變效果的背景，會(huì)覆蓋 color。
boxShadow：陰影效果，值為一個(gè) BoxShadow 集合。
backgroundBlendMode：應(yīng)該是背景混合模式，這個(gè)應(yīng)該比較復(fù)雜，后面再研究。
image：使用圖片作為裝飾。
下面是一個(gè)設(shè)置了上述屬性的?demo：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? var imgUrl =
? ? ? ? "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545122324077&di=1b5986ad937c81c41f4c135ea1a9a026&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Df719f9458f01a18bf0be1a4bab1f2b3e%2Fc2fdfc039245d688a8f2cdcdacc27d1ed31b24e2.jpg";
? ? return MaterialApp(
? ? ? //是否顯示 debug 標(biāo)簽
? ? ? debugShowCheckedModeBanner: false,
? ? ? title: "Container",
? ? ? home: Scaffold(
? ? ? ? appBar: new AppBar(
? ? ? ? ? title: new Text("Container"),
? ? ? ? ),
? ? ? ? body: new Container(
//? ? ? color: new Color(0xFFFF0000),
? ? ? ? ? //外邊距，值為一個(gè) EdgeInsets 對(duì)象
? ? ? ? ? margin: EdgeInsets.all(30.0),
? ? ? ? ? //內(nèi)間距，值為一個(gè) EdgeInsets 對(duì)象
? ? ? ? ? padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0),
? ? ? ? ? //對(duì)齊方式，可選值有：
? ? ? ? ? //Alignment.topLeft：垂直靠頂部水平靠左對(duì)齊。
? ? ? ? ? //Alignment.topCenter：垂直靠頂部水平居中對(duì)齊。
? ? ? ? ? //Alignment.topRight：垂直靠頂部水平靠右對(duì)齊。
? ? ? ? ? //Alignment.centerLeft：垂直居中水平靠左對(duì)齊。
? ? ? ? ? //Alignment.center：垂直和水平居中都對(duì)齊。
? ? ? ? ? //Alignment.centerRight：垂直居中水平靠右對(duì)齊。
? ? ? ? ? //Alignment.bottomLeft：垂直靠底部水平靠左對(duì)齊。
? ? ? ? ? //Alignment.bottomCenter：垂直靠底部水平居中對(duì)齊。
? ? ? ? ? //Alignment.bottomRight：垂直靠底部水平靠右對(duì)齊。
? ? ? ? ? //除了上面的常量之外，還可以創(chuàng)建 Alignment 對(duì)象指定 x、y 偏移量
? ? ? ? ? alignment: Alignment.centerLeft,
? ? ? ? ? //裝飾，背景邊框等，不能與 color 屬性同時(shí)設(shè)置，會(huì)繪制在 child 之下，也就是會(huì)被 child 覆蓋
? ? ? ? ? decoration: new BoxDecoration(
? ? ? ? ? ? ? //背景填充顏色
? ? ? ? ? ? ? color: new Color(0xFFFF0000),
? ? ? ? ? ? ? //背景邊框
? ? ? ? ? ? ? border: new Border.all(
? ? ? ? ? ? ? ? ? //邊框顏色
? ? ? ? ? ? ? ? ? color: new Color(0xFFFFFF00),
? ? ? ? ? ? ? ? ? //邊框?qū)挾?/p>
? ? ? ? ? ? ? ? ? width: 5),
? ? ? ? ? ? ? //邊框圓角
? ? ? ? ? ? ? borderRadius: new BorderRadius.only(
? ? ? ? ? ? ? ? ? topLeft: new Radius.circular(5.0),
? ? ? ? ? ? ? ? ? topRight: new Radius.circular(10.0),
? ? ? ? ? ? ? ? ? bottomLeft: new Radius.circular(15.0),
? ? ? ? ? ? ? ? ? bottomRight: new Radius.circular(20.0)),
? ? ? ? ? ? ? //漸變效果，會(huì)覆蓋 color
? ? ? ? ? ? ? gradient: new LinearGradient(colors: [
? ? ? ? ? ? ? ? new Color(0xFFFFDEAD),
? ? ? ? ? ? ? ? new Color(0xFF98FB98),
? ? ? ? ? ? ? ? new Color(0xFF6495ED)
? ? ? ? ? ? ? ]),
? ? ? ? ? ? ? //陰影效果
? ? ? ? ? ? ? boxShadow: [new BoxShadow(color:Color(0xFFFF0000),blurRadius: 5.0)],
? ? ? ? ? ? ? //應(yīng)該是背景混合模式，這個(gè)應(yīng)該比較復(fù)雜，后面再研究
? ? ? ? ? ? ? backgroundBlendMode: BlendMode.color,
? ? ? ? ? ? ? //圖片
//? ? ? ? ? ? ? image: new DecorationImage(image: new NetworkImage(imgUrl))
? ? ? ? ? ? ? ),
? ? ? ? ? //也是裝飾，但是會(huì)繪制在 child 之上，也就是會(huì)覆蓋 child
//? ? ? ? ? foregroundDecoration: new BoxDecoration(
//? ? ? ? ? ? ? image: new DecorationImage(image: new NetworkImage(imgUrl))
//? ? ? ? ? ),
? ? ? ? ? //約束，這個(gè)規(guī)則貌似挺復(fù)雜的，后面詳細(xì)研究
? ? ? ? ? constraints: new BoxConstraints(maxWidth: 300.0, maxHeight: 400.0),
? ? ? ? ? //形狀變換，這個(gè)用得應(yīng)該也比較少，可能會(huì)在做動(dòng)畫的時(shí)候用到，后面詳細(xì)研究
? ? ? ? ? transform: new Matrix4.skewY(0.3),
? ? ? ? ? //子組件
? ? ? ? ? child: new Text(
? ? ? ? ? ? "Hello World",
? ? ? ? ? ? textDirection: TextDirection.ltr,
? ? ? ? ? ? style: new TextStyle(color: new Color(0xFFFFFFFF), fontSize: 40.0),
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}
運(yùn)行效果如下：
可以看到我們給 Container 設(shè)置了 margin 屬性，所以上下左右有一些外邊距，然后雖然設(shè)置了對(duì)齊方式 alignment 為 centerLeft，但是又設(shè)置了左邊距為 100，所有左邊又有一些內(nèi)間距，同時(shí)設(shè)置了約束 constraints 最大寬度為 300，所有它的寬度比全屏減去外邊距還要小一些，我們還設(shè)置了邊框、圓角、漸變背景、矩陣變換等一系列讓其效果更豐富的屬性，這些設(shè)置也并不麻煩，最終就是上面這個(gè)效果。
