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",
                          ),
                        ),
                      ),
                    )
                ),
              ],
            ),
     
     
  • 相关阅读:
    Windows&Android&ios后台机制总结
    启动Mongodb服务
    js获取一个月有多少天
    NaN类型和数字相加为NaN
    sql将datetime类型与字符串进行比较
    存储过程拼接sql
    将list转换成用逗号连接的字符串
    sql在查询结果集上新增一列
    让两个div排列在一行
    返回不同数据库类型的IDBConnection
  • 原文地址:https://www.cnblogs.com/liuys635/p/14726935.html
Copyright © 2011-2022 走看看