Flutter教學(xué)目錄持續(xù)更新中
github源代碼持續(xù)更新中
1.Container簡(jiǎn)介
一個(gè)擁有繪制玩讳、定位筝闹、調(diào)整大小的 widget涩堤。
2.組成
Container的組成如下：最里層的是child元素倦始；child元素首先會(huì)被padding包著霹俺；然后添加額外的constraints限制稳其；最后添加margin疼电。
Container的繪制的過程如下：首先會(huì)繪制transform效果分衫；接著繪制decoration模聋；然后繪制child肩民；最后繪制foregroundDecoration。
Container自身尺寸的調(diào)節(jié)分兩種情況：Container在沒有子節(jié)點(diǎn)（children）的時(shí)候链方，會(huì)試圖去變得足夠大持痰。除非constraints是unbounded限制，在這種情況下祟蚀，Container會(huì)試圖去變得足夠小工窍。帶子節(jié)點(diǎn)的Container，會(huì)根據(jù)子節(jié)點(diǎn)尺寸調(diào)節(jié)自身尺寸前酿，但是Container構(gòu)造器中如果包含了width患雏、height以及constraints，則會(huì)按照構(gòu)造器中的參數(shù)來進(jìn)行尺寸的調(diào)節(jié)薪者。
3.布局
由于Container組合了一系列的widget纵苛，這些widget都有自己的布局行為，因此Container的布局行為有時(shí)候是比較復(fù)雜的言津。
一般情況下攻人，Container會(huì)遵循如下順序去嘗試布局：對(duì)齊（alignment）；調(diào)節(jié)自身尺寸適合子節(jié)點(diǎn)悬槽；采用width怀吻、height以及constraints布局；擴(kuò)展自身去適應(yīng)父節(jié)點(diǎn)初婆；調(diào)節(jié)自身到足夠小蓬坡。進(jìn)一步說：如果沒有子節(jié)點(diǎn)猿棉、沒有設(shè)置width、height以及constraints屑咳，并且父節(jié)點(diǎn)沒有設(shè)置unbounded的限制萨赁，Container會(huì)將自身調(diào)整到足夠小。如果沒有子節(jié)點(diǎn)兆龙、對(duì)齊方式（alignment）杖爽，但是提供了width、height或者constraints紫皇，那么Container會(huì)根據(jù)自身以及父節(jié)點(diǎn)的限制慰安，將自身調(diào)節(jié)到足夠小。如果沒有子節(jié)點(diǎn)聪铺、width化焕、height、constraints以及alignment铃剔，但是父節(jié)點(diǎn)提供了bounded限制撒桨，那么Container會(huì)按照父節(jié)點(diǎn)的限制，將自身調(diào)整到足夠大番宁。如果有alignment元莫，父節(jié)點(diǎn)提供了unbounded限制，那么Container將會(huì)調(diào)節(jié)自身尺寸來包住child蝶押；如果有alignment踱蠢，并且父節(jié)點(diǎn)提供了bounded限制，那么Container會(huì)將自身調(diào)整的足夠大（在父節(jié)點(diǎn)的范圍內(nèi)）棋电，然后將child根據(jù)alignment調(diào)整位置茎截；含有child，但是沒有width赶盔、height企锌、constraints以及alignment，Container會(huì)將父節(jié)點(diǎn)的constraints傳遞給child于未，并且根據(jù)child調(diào)整自身撕攒。
4.屬性
key：Container唯一標(biāo)識(shí)符，用于查找更新烘浦。
alignment：控制child的對(duì)齊方式抖坪，如果container或者container父節(jié)點(diǎn)尺寸大于child的尺寸，這個(gè)屬性設(shè)置會(huì)起作用闷叉，有很多種對(duì)齊方式擦俐。
padding：decoration內(nèi)部的空白區(qū)域，如果有child的話握侧，child位于padding內(nèi)部蚯瞧。padding與margin的不同之處在于嘿期，padding是包含在content內(nèi)，而margin則是外部邊界埋合，設(shè)置點(diǎn)擊事件的話备徐，padding區(qū)域會(huì)響應(yīng)，而margin區(qū)域不會(huì)響應(yīng)饥悴。
color：用來設(shè)置container背景色坦喘，如果foregroundDecoration設(shè)置的話，可能會(huì)遮蓋color效果西设。
decoration：繪制在child后面的裝飾，設(shè)置了decoration的話答朋，就不能設(shè)置color屬性贷揽，否則會(huì)報(bào)錯(cuò)，此時(shí)應(yīng)該在decoration中進(jìn)行顏色的設(shè)置梦碗。
foregroundDecoration：繪制在child前面的裝飾禽绪。
width：container的寬度，設(shè)置為double.infinity可以強(qiáng)制在寬度上撐滿洪规，不設(shè)置印屁，則根據(jù)child和父節(jié)點(diǎn)兩者一起布局。
height：container的高度斩例，設(shè)置為double.infinity可以強(qiáng)制在高度上撐滿雄人。
constraints：添加到child上額外的約束條件。
margin：圍繞在decoration和child之外的空白區(qū)域念赶，不屬于內(nèi)容區(qū)域础钠。
transform：設(shè)置container的變換矩陣，類型為Matrix4叉谜。
child：container中的內(nèi)容widget旗吁。
5.創(chuàng)建一個(gè)Container
Container(
margin: EdgeInsets.all(10),
color: Colors.blue,
width: 50,
height: 50,
child: Container(
margin: EdgeInsets.all(10),
color: Colors.yellow,
),
),
6. constraints屬性簡(jiǎn)介：
這里我們父節(jié)點(diǎn)添加約束條件最小高度50，最大高度50停局，然后子節(jié)點(diǎn)設(shè)置Container高度是10很钓，結(jié)果是子節(jié)點(diǎn)高度是50，這就是父節(jié)點(diǎn)的約束起了作用
//定義一個(gè)redBox董栽，只設(shè)置顏色码倦，不指定寬高
final Widget redBox = DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
);
Container(
margin: EdgeInsets.only(top: 50),
//BoxConstraints.tight(Size size)，它可以生成給定大小的限制
//BoxConstraints.expand()可以生成一個(gè)盡可能大的用以填充另一個(gè)容器
constraints: BoxConstraints(
minWidth: double.infinity, //最小寬度寬度盡可能大
minHeight: 50, //最大高度50像素
maxHeight: 50),
child: Container(
height: 10,
// height: 180,
child: redBox,
),
),
7.decoration屬性簡(jiǎn)介
我們創(chuàng)建一個(gè)帶圓角的裆泳，帶漸變顏色的Container
Container(
margin: EdgeInsets.only(top: 10, left: 10, right: 10),
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(colors: [
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
])),
),
8.transform屬性簡(jiǎn)介
變換矩陣
Container(
// margin: EdgeInsets.all(10),
// constraints: BoxConstraints.expand(
// height: 200),
// constraints: BoxConstraints(
// minWidth: double.infinity, //寬度盡可能大
// minHeight: 150 //最小高度為50像素
// ),
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(10),
color: Colors.blue[600],
alignment: Alignment.center,
child: Text(
'Hello World',
style: Theme.of(context)
.textTheme
.headline4
.copyWith(color: Colors.white),
),
transform: Matrix4.rotationZ(0.1),
),
Container 的用途非常廣泛叹洲，屬性也是眾多，這里我們就先對(duì)他有個(gè)初步認(rèn)知工禾，跟著后面的學(xué)習(xí)就會(huì)進(jìn)一步的了解了
深入講解：Flutter（44）：Layout組件之Container
下一章我們學(xué)習(xí)基礎(chǔ)組件之Row/Column
