Flutter之BoxDecoration组件

/** 装饰器,可以用来修饰其他的组件,和Android里面的shape很相似
    const BoxDecoration({
    this.color,//背景色
    this.image,//图片
    this.border,//描边
    this.borderRadius,//圆角大小
    this.boxShadow,//阴影
    this.gradient,//过度效果
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
    })
 */
body: ListView(
            children: <Widget>[
              Container(
                width: 100.0,
                height: 100.0,
                margin: EdgeInsets.all(20.0),
                decoration: new BoxDecoration(
                  color: Color(0x6600ff00),
                  border: Border.all(
                      color: Color(0xff0000ff)
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),

              Container(
                width: 100.0,
                height: 100.0,
                margin: EdgeInsets.all(20.0),
                decoration: new BoxDecoration(
                  image: DecorationImage(image: NetworkImage(
                      "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg")),
                ),
              ),

              Container(
                width: 100.0,
                height: 100.0,
                margin: EdgeInsets.all(20.0),
                decoration: new BoxDecoration(
                    color: Color(0xffffffff),
                    boxShadow: [
                      BoxShadow(
                          color: Color(0xffff0000),
                          offset: Offset(2.0, 3.0),
                          blurRadius: 6.0 /*,spreadRadius:2.0*/)
                    ],
                    gradient: LinearGradient(
                        colors: [
                          Color(0xff00ff00),
                          Color(0xffffffff),
                          Color(0xff00ff00)
                        ]
                    )
                ),
              ),
              Align(
                alignment: Alignment.center,
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  margin: EdgeInsets.all(20.0),
                  decoration: new BoxDecoration(
                      color: Color(0xffffffff),
                      border: Border.all(
                          color: Color(0xff0000ff)
                      ),
//                    borderRadius: BorderRadius.circular(10.0),
                      image: DecorationImage(
                          image: NetworkImage(
                              "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                          fit: BoxFit.fill
                      ),
                      shape: BoxShape.circle,
                  ),
                ),
              )
            ],
          )

猜你喜欢

转载自blog.csdn.net/weixin_34183910/article/details/86946954