Flutter基礎：Flutter中的div——Container

將Container比作成Flutter中的div並不恰當，但這並不妨礙前端同窗用Container作爲起點來學習Flutter。Flutter官方的文檔閱讀起來不是很直觀，對於習慣了看前端類有直觀示例的文檔的同窗來講不是很友好，故簡單的總結了一下，從Container的基礎用法開始。

Container基礎用法

經過color屬性生成一個黃色的Container

Container(
    color: Colors.yellow,
);
複製代碼

---

經過margin屬性設置這個Container的外邊距

Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)
複製代碼

---

經過decoration屬性來將這個Container設置成圓形，注意Container的color屬性和decoration屬性只能存其一，不能同時提供

Container(
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)
複製代碼

---

爲Container加一個綠色的child Container，此時child會充滿父widget的空間

Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);
複製代碼

---

爲子Container設置寬高並經過alignment屬性使其居中：

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        width: 200,
        height: 100,
    ),
);
複製代碼

---

經過margin來使其居中

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    ),
);
複製代碼

---

加入一個文本作爲其child，能看到左上角的文本嗎？

Container(
    color: Colors.yellow,
    child: Text(
        "快狗打車",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
);
複製代碼

---

使用alignment屬性來設置childwidget的對齊方式，一般使用Alignment類來設置對其方式

Container(
    color: Colors.yellow,
    child: Text(
        "快狗打車",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
    alignment: Alignment.centerLeft, // Alignment.bottomRight ...
);
複製代碼

---

經過另外一個Container來包住這個Text，並設置居中

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        child: Text(
            "快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
複製代碼

---

使用padding屬性設置一會兒Container的內邊距

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        child: Text(
            "快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
複製代碼

---

使用transform屬性能夠進行矩陣轉換相關的設置， 一般咱們都是用它來作旋轉

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 200, 100, 300),
        transform: Matrix4.rotationZ(0.2),
    ),      
);
複製代碼

---

使用decoration屬性還能夠設置Container的內邊距、圓角、背景圖、邊框和陰影等，主要是用於裝飾背景

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        decoration: BoxDecoration(
            // 背景色
            color: Colors.green,
            // 圓角
            borderRadius: BorderRadius.circular(10),
            // 邊框
            border: Border.all(
                color: Colors.black54,
                width: 2,
            ),
            // 陰影
            boxShadow: [
                BoxShadow(
                    color: Colors.pink,
                    blurRadius: 5.0,
                ),
            ],
            // 背景圖片
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.centerLeft,
            ),
        ),
        child: Text(
            "快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
複製代碼

---

decoration 與 foregroundDecoration有點像css中::before和::after，區別是繪製順序不一樣，foregroundDecoration能夠用來裝飾前景

// 使用decoration去設置
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        transform: Matrix4.rotationZ(0.2),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "快狗打車快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)
複製代碼

// 使用foregroundDecoration去設置
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
        transform: Matrix4.rotationZ(0.2),
        foregroundDecoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "快狗打車快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)
複製代碼

效果對比:

能夠看到，使用foregroundDecoration設置背景圖時，背景圖圖片會蓋在文字上方，使用decoration則相反

---

使用constraints來設置約束，用來約束自身，描述當前widget所容許佔用的空間大小，一般使用BoxConstraint來設置約束條件。這裏約束了子Container的最大和最小寬高

child Container無child的狀況下，子Container會使用約束容許的最大高度和最大寬度，

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 100,
            minWidth: 100
        ),
    ),      
);
複製代碼

---

child Container有child的狀況，子Container會根據它的child的大小和約束來佈局，本例中因爲Text文本widget所佔用的空間並未達到約束規定的最小空間，即最小寬高，這裏直接按照約束中的最小寬高進行佈局

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
複製代碼

---

若是將上面例子中Textwidget所須要佔用的空間變大，例如將字體變大，則Text的父Container按最大約束空間進行佈局

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "快狗打車",
            textDirection: TextDirection.ltr,
            fontSize: 300,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
複製代碼

---

以上就是Container的基本用法

參考

• Container class
• Flutter — Container Cheat Sheet

關注咱們