【Flutter 1-16】Flutter手把手教程UI佈局和Widget——容器控件Container

做者 | 弗拉德
來源 | 弗拉德（公衆號：fulade_me)

Container

咱們先來看一下Container初始化的參數：

Container({
    Key key,
    // 位置 居左、居右、居中
    this.alignment, 
    // EdgeInsets Container的內邊距
    this.padding,
    // 背景顏色  
    this.color,
    // 背景裝飾器
    this.decoration,
    // 前景裝飾器
    this.foregroundDecoration,
    // 寬度
    double width,
    // 告訴
    double height,
    // 約束
    BoxConstraints constraints,
    // EdgeInsets Container的外邊距
    this.margin,
    // 旋轉
    this.transform,
    // 子控件
    this.child,
    // 裁剪Widget的模式 
    this.clipBehavior = Clip.none,
  })

注意：

• Container 的color屬性與屬性 decoration的color存在衝突，若是兩個color都作了設置，默認會以decoration的color爲準。
• 若是咱們沒有給Container設置width和height，Container會跟child的大小同樣；假如咱們沒有設置child的時候，它的尺寸會極大化，儘量的充滿它的父Widget。

1. 最簡單的Container

Container(
    child: Text("Fulade"),
    color: Colors.red,
)

Container接收一個child參數，咱們能夠傳入Text做爲child參數,而後傳入是一個顏色。

2. Padding

Container(
    child: Text("Pading 10"),
    padding: EdgeInsets.all(10),
    color: Colors.blue,
)

Padding是內邊距，咱們在這裏設置了padding: EdgeInsets.all(10)，也就是說Text距離Container的四條邊的邊距都是10。

3. Margin

Container(
    child: Text("Margin 10"),
    margin: EdgeInsets.all(10),
    color: Colors.green,
)

Margin是外邊距，咱們在這裏設置了margin: EdgeInsets.all(10)，Container在原有大小的基礎上，又被包圍了一層寬度爲10的矩形。
須要注意，綠色外圍的白色區域也是屬於Container的一部分。

4. transform

Container(
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    child: Text("transform"),
    transform: Matrix4.rotationZ(0.1),
    color: Colors.red,
)

transform能夠幫助咱們作旋轉，Matrix4給咱們提供了不少的變換樣式。

5. decoration
decoration能夠幫助咱們實現更多的效果。例如形狀、圓角、邊界、邊界顏色等。

Container(
    child: Text("Decoration"),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(5)),
    ),
)

這裏就是設置了一個圓角的示例，一樣咱們對BoxDecoration的color屬性設置顏色，對整個Container的也是有效的。

6. 顯示 Image

Container(
    height: 40,
    width: 100,
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        image: DecorationImage(
                image: AssetImage("images/flutter_icon_100.png"),
                fit: BoxFit.contain,
            ),
    ),
)

BoxDecoration能夠傳入一個Image對象，這樣就靈活了不少，Image能夠來自本地也能夠來自網絡。

7. Border

Container(
    child: Text('BoxDecoration with border'),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(5),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circula(12),
        border: Border.all(
            color: Colors.red,
            width: 3,
        ),
    ),
)

使用border能夠幫助咱們作邊界效果，還能夠設置圓角borderRadius，也能夠設置border的寬度，顏色等。

8. 漸變色

Container(
    padding: EdgeInsets.symmetric(horizontal: 20),
    margin: EdgeInsets.all(20), //容器外填充
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.black, Colors.red],
            center: Alignment.center,
            radius: 5
        ),
    ),
    child: Text(
        //卡片文字
        "RadialGradient",
        style: TextStyle(color: Colors.white),
    ),
)

BoxDecoration的屬性gradient能夠接收一個顏色的數組，Alignment.center是漸變色開始的位置，能夠從左上角、右上角、中間等位置開始顏色變化。

想體驗以上的Container的示例的運行效果，能夠到個人Github倉庫項目flutter_app->lib->routes->container_page.dart查看，而且能夠下載下來運行並體驗。

---