码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter-CircleAvatar圆形和圆角图片

时间:2019-12-30 17:33:20      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:top   radius   for   ova   color   set   显示   new   border   

原文: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(
                  width: 80.0,
                  height: 80.0,
                  child: Image.network(
                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
                    fit: BoxFit.fill,),
                ),
              ),
            ),
            Align(
                child: Container(
                  width: 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),
                width: 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),
                  width: 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",
                      ),
                    ),
                  ),
                )
            ),
          ],
        ),

Flutter-CircleAvatar圆形和圆角图片

标签:top   radius   for   ova   color   set   显示   new   border   

原文地址:https://www.cnblogs.com/ssjf/p/12120578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!