image.png
開發(fā)中逊抡，對(duì)圖片進(jìn)行圓角處理速那，是很常見的需求敢辩，下面提供四種方法實(shí)現(xiàn)圓角效果，控件倒圓角也可以應(yīng)用
flutter中可以使用Container特性逛万、CircleAvatar的backgroundImage泳猬、ClipOval組件、ClipRRect組件實(shí)現(xiàn)圓角效果
1宇植、使用Container的特性得封，進(jìn)行裁剪實(shí)現(xiàn)圓角
Container(
width: 100,
height: 100,
//超出部分，可裁剪
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
),
child: Image.network(
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
fit: BoxFit.cover,
),
)
2指郁、使用CircleAvatar 的 backgroundImage 屬性實(shí)現(xiàn)圓角
CircleAvatar(
radius: 50,
backgroundColor: Colors.white, //未設(shè)置背景色忙上，加載圖片時(shí)會(huì)顯示紅色
backgroundImage: NetworkImage(
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
)
3、使用 ClipOval 組件來實(shí)現(xiàn)圓角
ClipOval(
child: Image.network(
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
)
4闲坎、使用ClipRRect組件為圖片實(shí)現(xiàn)圓角
ClipRRect(//是ClipRRect疫粥，不是ClipRect
borderRadius: BorderRadius.circular(50),
child: Image.network(
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
)
