Flutter基础：Flutter中的div——Container（中）-阿里云开发者社区

Flutter基础：Flutter中的div——Container（中）

2022-05-07 241

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 将Container比做成Flutter中的div并不恰当，但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观，对于习惯了看前端类有直观示例的文档的同学来说不是很友好，故简单的总结了一下，从Container的基础用法开始。

加入一个文本做为其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),
        ),
    ),
);