Flutter中的div——Container

2020-05-1608:13:57APP与小程序开发Comments2,215 views字数 4958阅读模式

Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习FlutterFlutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

Container基础用法

通过color属性生成一个黄色的Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


通过margin属性设置这个Container的外边距文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


通过decoration属性来将这个Container设置成圆形,注意Containercolor属性和decoration属性只能存其一,不能同时提供文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


Container加一个绿色的child Container,此时child会充满父widget的空间文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


为子Container设置宽高并通过alignment属性使其居中:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


通过margin来使其居中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


加入一个文本做为其child,能看到左上角的文本吗?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


使用alignment属性来设置childwidget的对齐方式,通常使用Alignment类来设置对其方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


通过另一个Container来包住这个Text,并设置居中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


使用padding属性设置一下子Container的内边距文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


使用transform属性可以进行矩阵转换相关的设置, 通常我们都是用它来做旋转文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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

Flutter中的div——Container文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


使用decoration属性还可以设置Container的内边距、圆角、背景图、边框和阴影等,主要是用于装饰背景文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


decorationforegroundDecoration有点像css中::before::after,区别是绘制顺序不同,foregroundDecoration可以用来装饰前景文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

// 使用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),
        ),
    ),
)
复制代码

效果对比:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

Flutter中的div——Container可以看到,使用foregroundDecoration设置背景图时,背景图图片会盖在文字上方,使用decoration则相反文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


使用constraints来设置约束,用来约束自身,描述当前widget所允许占用的空间大小,通常使用BoxConstraint来设置约束条件。这里约束了子Container的最大和最小宽高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

child Container无child的情况下,子Container会使用约束允许的最大高度和最大宽度,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


child Container有child的情况,子Container会根据它的child的大小和约束来布局,本例中由于Text文本widget所占用的空间并未达到约束规定的最小空间,即最小宽高,这里直接按照约束中的最小宽高进行布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


如果将上面例子中Textwidget所需要占用的空间变大,例如将字体变大,则Text的父Container按最大约束空间进行布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html


以上就是Container的基本用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

作者:快狗打车前端团队
链接:https://juejin.im/post/5ebcddcdf265da7c030dc7e7
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18851.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/18851.html

Comment

匿名网友 填写信息

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

确定