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,
  ),
),

 

转载于:https://www.cnblogs.com/xinzaimengzai/p/11057713.html