其他分享
首页 > 其他分享> > flutter 实现圆角头像的2种方法

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

作者:互联网

圆角头像在开发中应用太普遍了,我总结了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,
  ),
),

 

标签:圆角,b9999,Container,borderRadius,image,40,头像,ClipRRect,flutter
来源: https://www.cnblogs.com/xinzaimengzai/p/11057713.html