美文网首页flutterFlutter
Flutter之BoxDecoration组件

Flutter之BoxDecoration组件

作者: 习惯了_就好 | 来源:发表于2019-01-23 10:56 被阅读28次
    /** 装饰器,可以用来修饰其他的组件,和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,
                      ),
                    ),
                  )
                ],
              )
    

    相关文章

      网友评论

        本文标题:Flutter之BoxDecoration组件

        本文链接:https://www.haomeiwen.com/subject/likjjqtx.html