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

image.png

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

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

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

2.Layout行為

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

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

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

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

此示例顯示了一個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),
)

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