Flutter基礎：Flutter中的div——Container

快狗叫車前端團隊發表於2020-05-14
FlutterAI

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

Container基礎用法

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

Container(
    color: Colors.yellow,
);
複製程式碼
Flutter基礎：Flutter中的div——Container

通過margin屬性設定這個Container的外邊距

Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)
複製程式碼
Flutter基礎：Flutter中的div——Container

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

Container(
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)
複製程式碼
Flutter基礎：Flutter中的div——Container

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

Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

為子Container設定寬高並通過alignment屬性使其居中：

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        width: 200,
        height: 100,
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

通過margin來使其居中

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

加入一個文字做為其child，能看到左上角的文字嗎？

Container(
    color: Colors.yellow,
    child: Text(
        "快狗叫車",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

使用alignment屬性來設定childwidget的對齊方式，通常使用Alignment類來設定對其方式

Container(
    color: Colors.yellow,
    child: Text(
        "快狗叫車",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
    alignment: Alignment.centerLeft, // Alignment.bottomRight ...
);
複製程式碼
Flutter基礎：Flutter中的div——Container

通過另一個Container來包住這個Text，並設定居中

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        child: Text(
            "快狗叫車",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

使用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),
        ),
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

使用transform屬性可以進行矩陣轉換相關的設定， 通常我們都是用它來做旋轉

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 200, 100, 300),
        transform: Matrix4.rotationZ(0.2),
    ),      
);
複製程式碼
Flutter基礎：Flutter中的div——Container

使用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),
        ),
    ),
);
複製程式碼
Flutter基礎：Flutter中的div——Container

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),
        ),
    ),
)
複製程式碼

效果對比:

Flutter基礎：Flutter中的div——Container

可以看到，使用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
        ),
    ),      
);
複製程式碼
Flutter基礎：Flutter中的div——Container

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),
        ),
    ),      
);
複製程式碼
Flutter基礎：Flutter中的div——Container

如果將上面例子中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),
        ),
    ),      
);
複製程式碼
Flutter基礎：Flutter中的div——Container

以上就是Container的基本用法

參考

關注我們

公眾號@前端論道

相關文章