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

关注咱们