Flutter實(shí)戰(zhàn) Container

我們?cè)谇懊娴恼鹿?jié)示例中多次用到過Container組件，本節(jié)我們就詳細(xì)介紹一下Container組件。Container是一個(gè)組合類容器，它本身不對(duì)應(yīng)具體的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等組件組合的一個(gè)多功能容器，所以我們只需通過一個(gè)Container組件可以實(shí)現(xiàn)同時(shí)需要裝飾、變換、限制的場(chǎng)景。下面是Container的定義：

Container({
  this.alignment,
  this.padding, //容器內(nèi)補(bǔ)白，屬于decoration的裝飾范圍
  Color color, // 背景色
  Decoration decoration, // 背景裝飾
  Decoration foregroundDecoration, //前景裝飾
  double width,//容器的寬度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制條件
  this.margin,//容器外補(bǔ)白，不屬于decoration的裝飾范圍
  this.transform, //變換
  this.child,
})

Container的大多數(shù)屬性在介紹其它容器時(shí)都已經(jīng)介紹過了，不再贅述，但有兩點(diǎn)需要說明：

• 容器的大小可以通過width、height屬性來指定，也可以通過constraints來指定；如果它們同時(shí)存在時(shí)，width、height優(yōu)先。實(shí)際上 Container 內(nèi)部會(huì)根據(jù)width、height來生成一個(gè)constraints。
• color和decoration是互斥的，如果同時(shí)設(shè)置它們則會(huì)報(bào)錯(cuò)！實(shí)際上，當(dāng)指定color時(shí)，Container內(nèi)會(huì)自動(dòng)創(chuàng)建一個(gè)decoration。

#實(shí)例

我們通過Container來實(shí)現(xiàn)如圖5-16所示的卡片：

實(shí)現(xiàn)代碼如下：

Container(
  margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外填充
  constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
  decoration: BoxDecoration(//背景裝飾
      gradient: RadialGradient( //背景徑向漸變
          colors: [Colors.red, Colors.orange],
          center: Alignment.topLeft,
          radius: .98
      ),
      boxShadow: [ //卡片陰影
        BoxShadow(
            color: Colors.black54,
            offset: Offset(2.0, 2.0),
            blurRadius: 4.0
        )
      ]
  ),
  transform: Matrix4.rotationZ(.2), //卡片傾斜變換
  alignment: Alignment.center, //卡片內(nèi)文字居中
  child: Text( //卡片文字
    "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
  ),
);

可以看到Container具備多種組件的功能，通過查看Container源碼，我們會(huì)很容易發(fā)現(xiàn)它正是前面我們介紹過的多種組件組合而成。在 Flutter 中，Container組件也正是組合優(yōu)先于繼承的實(shí)例。

#Padding和Margin

接下來我們來研究一下Container組件margin和padding屬性的區(qū)別:

...
Container(
  margin: EdgeInsets.all(20.0), //容器外補(bǔ)白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器內(nèi)補(bǔ)白
  color: Colors.orange,
  child: Text("Hello world!"),
),
...

可以發(fā)現(xiàn)，直觀的感覺就是margin的留白是在容器外部，而padding的留白是在容器內(nèi)部，讀者需要記住這個(gè)差異。事實(shí)上，Container內(nèi)margin和padding都是通過Padding 組件來實(shí)現(xiàn)的，上面的示例代碼實(shí)際上等價(jià)于：

...
Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),
...