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

    原文:https://www.jianshu.com/p/3d8d547ce99d

    /**
     * 发现不添加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",
                          ),
                        ),
                      ),
                    )
                ),
              ],
            ),
  • 相关阅读:
    VC++SDK编程——字体及位置示例
    VC2008以资源形式实现多语言版本(非Unicode) .转
    跟着编程之美学算法——最长递增子序列(转)
    跟着编程之美学算法——最长公共子序列
    MFC的多国语言界面的实现
    随意输入N个英文字符,找出其中最长连续的排列。
    C++读写EXCEL文件方式比较 .
    操作EXCEL和符号分隔文本的类CSpreadSheet .
    每个程序员都必读的12篇文章
    VC项目配置详解
  • 原文地址:https://www.cnblogs.com/ssjf/p/12120578.html
Copyright © 2011-2022 走看看