首页 > 其他 > 详细

flutter 实现圆角头像的2种方法

时间:2019-06-20 12:30:36      阅读:324      评论:0      收藏:0      [点我收藏+]

圆角头像在开发中应用太普遍了,我总结了2种实现方法,分享给大家

 

方法一:

使用Container组件的decoration可以实现

Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    image: DecorationImage(
      image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg",)
    )
  ),
),

 其中borderRadius的值设为宽或高的一半

方法二:使用ClipRRect组件

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network(
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg", 
    width: 40, 
    height: 40,
  ),
),

 

flutter 实现圆角头像的2种方法

原文:https://www.cnblogs.com/xinzaimengzai/p/11057713.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!