Flutter基础：Flutter中的div——Container

最新推荐文章于 2023-07-12 20:05:18 发布

原创最新推荐文章于 2023-07-12 20:05:18 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Flutter中Container组件的基本用法，包括颜色、边距、装饰、子元素布局及约束设置，帮助初学者快速掌握Container组件的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

将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),        ),    ),);