Flutter中的div——Container

2020年5月16日08:13:57 发表评论 42 views

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

Container基础用法

通过color属性生成一个黄色的Container

Container(
    color: Colors.yellow,
);
复制代码

Flutter中的div——Container


通过margin属性设置这个Container的外边距

Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)
复制代码

Flutter中的div——Container


通过decoration属性来将这个Container设置成圆形,注意Containercolor属性和decoration属性只能存其一,不能同时提供

Container(
    margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)
复制代码

Flutter中的div——Container


Container加一个绿色的child Container,此时child会充满父widget的空间

Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);
复制代码

Flutter中的div——Container


为子Container设置宽高并通过alignment属性使其居中:

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        width: 200,
        height: 100,
    ),
);
复制代码

Flutter中的div——Container


通过margin来使其居中

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
    ),
);
复制代码

Flutter中的div——Container


加入一个文本做为其child,能看到左上角的文本吗?

Container(
    color: Colors.yellow,
    child: Text(
        "快狗打车",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
);
复制代码

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中的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中的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中的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中的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中的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中的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中的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中的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中的div——Container


以上就是Container的基本用法

作者:快狗打车前端团队
链接:https://juejin.im/post/5ebcddcdf265da7c030dc7e7
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: