Flutter基礎:Flutter中的div——Container

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

Container比做成Flutter中的div並不恰當,但這並不妨礙前端同學用Container做為起點來學習FlutterFlutter官方的文件閱讀起來不是很直觀,對於習慣了看前端類有直觀示例的文件的同學來說不是很友好,故簡單的總結了一下,從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設定成圓形,注意Containercolor屬性和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

decorationforegroundDecoration有點像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的基本用法

參考

關注我們

公眾號@前端論道

最新文章