zoukankan      html  css  js  c++  java
  • Flutter-CircleAvatar圆形和圆角图片

     
    /**
     * 发现不添加Align时,CircleAvatar并没有显示为圆形,
     * 设置child为要显示的url时,并不能显示为圆形,只有设置backgroundColor或者backgroundImage时才显示为了圆形
     * radius和minRadius与maxRadius不能同时使用;
     * ClipOval不在Align里面时也不能显示为圆形,ClipOval中image设置为fit: BoxFit.fill才能显示为圆形;
     * BoxDecoration不在Align里面时也不能显示为圆形,BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形;
     *
        const CircleAvatar({
        Key key,
        this.child,
        this.backgroundColor,//背景色,相当于加载中或加载失败的占位图
        this.backgroundImage,//背景图,相当于加载中或加载失败的占位图
        this.foregroundColor,//前景色,
        this.radius,
        this.minRadius,
        this.maxRadius,
        })
     */
     
     
    body: ListView(
              padding: EdgeInsets.all(20.0),
              children: <Widget>[
                CircleAvatar(
                  child: Image.network(
                      "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
    //                backgroundColor: Color(0xffff0000),
    //              backgroundImage: NetworkImage(
    //                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                  radius: 40.0,
    //              foregroundColor: Color(0x55000000),
                ),
                Align(
                  child: CircleAvatar(
                    child: Image.network(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
    //                backgroundImage: new NetworkImage(
    //                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                    backgroundColor: Color(0xffff0000),
                    radius: 40.0,
                  ),
                ),
                //圆行图片
                Align(
                  child: CircleAvatar(
    //                child: Image.network(
    //                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                    backgroundImage: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                    backgroundColor: Color(0xffff0000),
                    radius: 40.0,
                  ),
                ),
                Align(
                  child: CircleAvatar(
    //                child: Image.network(
    //                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                    backgroundImage: NetworkImage(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
                    foregroundColor: Color(0xffff0000),
                    radius: 40.0,
                  ),
                ),
                Align(
                  child: ClipOval(
                    child: SizedBox(
                       80.0,
                      height: 80.0,
                      child: Image.network(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                        fit: BoxFit.fill,),
                    ),
                  ),
                ),
                Align(
                    child: Container(
                       80.0,
                      height: 80.0,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                          ),
                        ),
                      ),
                    )
                ),
                //圆角图片
                Align(
                  child: Container(
                    margin: EdgeInsets.only(top: 10.0),
                     80.0,
                    height: 80.0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(5.0),
                      child: Image.network(
                        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
                Align(
                    child: Container(
                      margin: EdgeInsets.only(top: 10.0),
                       80.0,
                      height: 100.0,
                      decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(5.0),
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                          ),
                        ),
                      ),
                    )
                ),
              ],
            ),
     
     
  • 相关阅读:
    Photoshop 基础七 位图 矢量图 栅格化
    Photoshop 基础六 图层
    Warfare And Logistics UVALive
    Walk Through the Forest UVA
    Airport Express UVA
    Guess UVALive
    Play on Words UVA
    The Necklace UVA
    Food Delivery ZOJ
    Brackets Sequence POJ
  • 原文地址:https://www.cnblogs.com/liuys635/p/14726935.html
Copyright © 2011-2022 走看看