flutter图片实现圆形的四种方法

flutter中可以使用Container特性、CircleAvatar的backgroundImage、ClipOval组件、ClipRRect组件实现圆角效果

1、使用Container的特性，进行裁剪实现圆角

1.  
   Container(
2.  
   width: 100,
3.  
   height: 100,
4.  
   //超出部分，可裁剪
5.  
   clipBehavior: Clip.hardEdge,
6.  
   decoration: BoxDecoration(
7.  
   borderRadius: BorderRadius.circular(50),
8.  
   ),
9.  
   child: Image.network(
10.  
    "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
11.  
    fit: BoxFit.cover,
12.  
    ),
13.  
    )

2、使用CircleAvatar 的 backgroundImage 属性实现圆角

1.  
   CircleAvatar(
2.  
   radius: 50,
3.  
   backgroundColor: Colors.white, //未设置背景色，加载图片时会显示红色
4.  
   backgroundImage: NetworkImage(
5.  
   "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
6.  
   )

3、使用 ClipOval 组件来实现圆角

1.  
   ClipOval(
2.  
   child: Image.network(
3.  
   "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
4.  
   width: 100,
5.  
   height: 100,
6.  
   fit: BoxFit.cover,
7.  
   ),
8.  
   )

4、使用ClipRRect组件为图片实现圆角

1.  
   ClipRRect(//是ClipRRect，不是ClipRect
2.  
   borderRadius: BorderRadius.circular(50),
3.  
   child: Image.network(
4.  
   "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
5.  
   width: 100,
6.  
   height: 100,
7.  
   fit: BoxFit.cover,
8.  
   ),
9.  
   )

这篇好文章是转载于：学新通技术网