Container是一個(gè)statelessWidget.Container是一個(gè)包含常見的繪畫，定位和調(diào)整大小的widget.

image.png

Container 首先用padding包圍子控件（在布局解析時(shí)解析任何帶邊界的控件的decoration屬性值）,然后對(duì)填充范圍應(yīng)用附加約束（包括寬度和高度約束）. Container會(huì)被margin屬性設(shè)置的空白邊界約束.

在繪制過程中,container首先會(huì)應(yīng)用設(shè)置的transform,然后繪制decoration以填充范圍,再是繪制子控件,最后繪制foregroundDecoration,同時(shí)填充padded區(qū)域.

沒有child的Container試圖盡可能大，除非傳入的約束是無邊界的，在這種情況下，它們盡可能地小. 有child的Container, 構(gòu)造函數(shù)的width，height和constraints參數(shù)會(huì)覆蓋它。

2.Layout行為

有關(guān)框布局模型的介紹，請(qǐng)參閱BoxConstraints。
由于Container結(jié)合了許多其他小部件，每個(gè)小部件都有自己的布局行為，因此Container的布局行為有點(diǎn)復(fù)雜.

Container按這樣的順序：在響應(yīng)alignment時(shí)，會(huì)調(diào)整自身大小來適應(yīng)子項(xiàng)，在響應(yīng)width，height和constraints時(shí)，以擴(kuò)展以適合父級(jí)，盡可能小。

3.進(jìn)一步說:

• 如果widget沒有子節(jié)點(diǎn)，沒有高度，沒有寬度，沒有約束，并且父節(jié)點(diǎn)提供無限制約束，則Container嘗試盡可能小。
• 如果widget沒有子對(duì)象并且沒有提供對(duì)齊，但提供了高度，寬度或約束，那么在給定這些約束和父對(duì)象約束的組合的情況下，Container會(huì)盡可能小。
• 如果widget沒有子節(jié)點(diǎn)，沒有高度，沒有寬度，沒有約束，沒有對(duì)齊，但父節(jié)點(diǎn)提供了有界約束，則Container會(huì)擴(kuò)展以適應(yīng)父節(jié)點(diǎn)提供的約束。
• 如果widget具有alignment，并且父窗口提供無限制約束，則Container會(huì)嘗試圍繞子窗口調(diào)整自身大小。
• 如果widget具有對(duì)齊，并且父窗口提供有界約束，則Container會(huì)嘗試展開以適合父窗口，然后根據(jù)對(duì)齊方式將子項(xiàng)置于其自身內(nèi)。
• 否則，widget具有子級(jí)但沒有高度，沒有寬度，沒有約束，也沒有對(duì)齊，并且Container將約束從父級(jí)傳遞給子級(jí)并調(diào)整其大小以匹配子級(jí)。
• padding和 margin屬性對(duì)布局也起作用,正如上面描述的那些屬性(他們的效果只是為了增加上面描述的規(guī)則).裝飾可以隱式地增加padding（例如，BoxDecoration中的邊框有可以對(duì) padding起作用）；參見Decoration.padding.
  。

demo1

new Center(
  child: new Container(
    margin: const EdgeInsets.all(10.0),
    color: const Color(0xFF00FF00),
    width: 48.0,
    height: 48.0,
  ),
)

此示例顯示了一個(gè)48x48綠色正方形（放置在Center小部件內(nèi)部），并留有空白以便它遠(yuǎn)離相鄰widget

demo2

new Container(
  constraints: new BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: new BoxDecoration(
    image: new DecorationImage(
      image: new NetworkImage('https://flutter.io/images/homepage/screenshot-1.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)

這個(gè)例子展示了如何同時(shí)使用容器的許多特性。
constraints被設(shè)置為適合字體大小加上充足的凈空垂直，同時(shí)水平擴(kuò)展以適應(yīng)父級(jí)。
padding是用來確保內(nèi)容和文本之間有空格的。
color使盒子變淡了。
alignment會(huì)使孩子在框中居中。
foregroundDecoration在文本上覆蓋一個(gè)圖片。最后，
transform對(duì)整個(gè)裝置施加輕微的旋轉(zhuǎn)以完成效果。