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

2022-05-07 188

版权

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

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

效果对比:

可以看到，使用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),
        ),
    ),      
);