【Flutter】入门06-容器Container及其装饰

一.基本介绍

1.新创建的容器，大小默认是父元素的大小。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(          
          color: Colors.yellow        
        ));
  }
}

2.当其内部存在子元素时大小则会变成仅仅包裹子元素的大小

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(
          color: Colors.yellow, 
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
        ));
  }
}

 

3.设置一些简单的属性

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(
          color: Colors.yellow,
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
          padding: EdgeInsets.all(20),
          margin: EdgeInsets.all(10),
          width: 120,
          height: 120,
        ));
  }
}

 

二.decoration，添加装饰

1.背景颜色

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(      
          // color: Colors.yellow, //当时用decoration时外部的color最好去掉，因为和有可能与内部的color造成冲突
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
          padding: EdgeInsets.all(20),
          margin: EdgeInsets.all(10),
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color:  Colors.yellow,
          ),
        ));
  }
}

1. 这里的背景颜色与外边的color效果是一样的；
2. 如果decoration定义了color属性，外部还存在color则会报错；（不只是decoration的color，我定了了border的color同样也会报错）

边框border

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(
          // color: Colors.yellow, //当时用decoration时外部的color最好去掉，因为和有可能与内部的color造成冲突
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
          padding: EdgeInsets.all(20),
          margin: EdgeInsets.all(10),
          width: 120,
          height: 120,
          decoration: BoxDecoration(
              color: Colors.yellow,
              border: Border.all(
                  color: Colors.deepPurpleAccent,
                  width: 8,
                  style: BorderStyle.solid)),
        ));
  }
}

圆角borderRadius

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(
          // color: Colors.yellow, //当时用decoration时外部的color最好去掉，因为和有可能与内部的color造成冲突
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
          padding: EdgeInsets.all(20),
          margin: EdgeInsets.all(10),
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(
                color: Colors.deepPurpleAccent,
                width: 8,
                style: BorderStyle.solid),
            borderRadius: BorderRadius.all(Radius.circular(8)),
          ),
        ));
  }
}

这里要着重说明一下如果只设置部分边框，添加圆角时则会影响显示效果。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
        ),
        body: Container(
          // color: Colors.yellow, //当时用decoration时外部的color最好去掉，因为和有可能与内部的color造成冲突
          child: Icon(
            Icons.favorite,
            color: Colors.red,
            size: 60,
          ),
          padding: EdgeInsets.all(20),
          margin: EdgeInsets.all(10),
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border(
              top: BorderSide(
                  color: Colors.deepPurpleAccent,
                  width: 8,
                  style: BorderStyle.solid),
            ),
            borderRadius: BorderRadius.all(Radius.circular(8)),
          ),
        ));
  }
}

阴影boxShadow

decoration: BoxDecoration(
             color: Colors.yellow,
              //如果单独设置一边边框会导致内容消失
              border: Border.all(
                  color: Colors.deepPurpleAccent,
                  width: 8,
                  style: BorderStyle.solid),
              // borderRadius: BorderRadius.all(Radius.circular(8)), //使用形状时不能使用
              boxShadow: [
                BoxShadow(
                    offset: Offset(5, 8),
                    color: Colors.black38,
                    blurRadius: 2, //模糊程度，值越大越模糊
                    spreadRadius: 1 //如果是正数就会扩大阴影面积，如果是负数就会缩小阴影面积
                    )
              ],
          ),

形状shape

 decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(
                color: Colors.deepPurpleAccent,
                width: 8,
                style: BorderStyle.solid),
            // borderRadius: BorderRadius.all(Radius.circular(8)),
            shape: BoxShape.circle,
          ),

注意：形状与borderRadius不能同时使用

渐变色-径向渐变RadialGradient

  decoration: BoxDecoration(
              color: Colors.yellow,
              //如果单独设置一边边框会导致内容消失
              border: Border.all(
                  color: Colors.deepPurpleAccent,
                  width: 8,
                  style: BorderStyle.solid),
              // borderRadius: BorderRadius.all(Radius.circular(8)), //使用形状时不能使用
              boxShadow: [
                BoxShadow(
                    offset: Offset(5, 8),
                    color: Colors.black38,
                    blurRadius: 2, //模糊程度，值越大越模糊
                    spreadRadius: 1 //如果是正数就会扩大阴影面积，如果是负数就会缩小阴影面积
                    )
              ],
              shape: BoxShape.circle,
              //径向渐变
              gradient: RadialGradient(
                colors: [
                  Colors.red,
                  Colors.yellow,
                ]
              )
              )

渐变色-线性渐变LinearGradient

decoration: BoxDecoration(
              color: Colors.yellow,
              //如果单独设置一边边框会导致内容消失
              border: Border.all(
                  color: Colors.deepPurpleAccent,
                  width: 8,
                  style: BorderStyle.solid),
              // borderRadius: BorderRadius.all(Radius.circular(8)), //使用形状时不能使用
              boxShadow: [
                BoxShadow(
                    offset: Offset(5, 8),
                    color: Colors.black38,
                    blurRadius: 2, //模糊程度，值越大越模糊
                    spreadRadius: 1 //如果是正数就会扩大阴影面积，如果是负数就会缩小阴影面积
                    )
              ],
              shape: BoxShape.circle,
              //线性渐变
              gradient: LinearGradient(
                colors: [
                  Colors.red,
                  Colors.yellow,
                ],
                begin: Alignment.bottomRight,
                end: Alignment.bottomLeft,
              )
              ),

三.背景图片

1.显示背景图片

decoration: BoxDecoration(
            image: DecorationImage(
              //image: AssetImage()使用项目中的资源
              //使用网络资源
              image: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580274504734&di=11e0f7587c1ea7d6f9427a1c5ec53de0&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2923294473%2C968661074%26fm%3D214%26gp%3D0.jpg'),             
            )
          ),

2.调整图片位置alignment

decoration: BoxDecoration(
            image: DecorationImage(
              //image: AssetImage()使用项目中的资源
              //使用网络资源
              image: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580274504734&di=11e0f7587c1ea7d6f9427a1c5ec53de0&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2923294473%2C968661074%26fm%3D214%26gp%3D0.jpg'),
              alignment: Alignment.topCenter
            )
          ),

图象重复repeat

decoration: BoxDecoration(
            image: DecorationImage(
              //image: AssetImage()使用项目中的资源
              //使用网络资源
              image: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580274504734&di=11e0f7587c1ea7d6f9427a1c5ec53de0&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2923294473%2C968661074%26fm%3D214%26gp%3D0.jpg'),
              alignment: Alignment.topCenter,
              repeat: ImageRepeat.repeatY
            )
          ),

填充

fit: BoxFit.cover

fit: BoxFit.contain

fit: BoxFit.fill

fit: BoxFit.fitHeight

fit: BoxFit.fitWidth