• 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",
                          ),
                        ),
                      ),
                    )
                ),
              ],
            ),
     
     
  • 相关阅读:
    css3实现背景图片颜色修改的多种方式
    KeyPress 和KeyDown 、KeUp之间的区别
    Web UI 自动化测试技术选型
    CSS3 动画性能优化
    prefetch_HTML5的页面资源预加载技术(Link prefetch)加速页面加载
    纯CSS3实现各种表情动画
    什么是css sprites(雪碧图),css sprites使用的优缺点
    Python爬虫连载7-cookie的保存与读取、SSL讲解
    Java连载82-Set、Collection、List、Map的UML演示
    HTML连载67-手风琴效果、2D转换模块
  • 原文地址:https://www.cnblogs.com/liuys635/p/14726935.html
Copyright © 2020-2023  润新知