En flutter, puede usar la función Contenedor, la imagen de fondo de CircleAvatar, el componente ClipOval y el componente ClipRRect para lograr efectos de esquinas redondeadas.
1. Aprovecha las características de Container para cortar y lograr esquinas redondeadas
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. Use la propiedad backgroundImage de CircleAvatar para lograr esquinas redondeadas
CircleAvatar(
radius: 50,
backgroundColor: Colors.white, //未设置背景色,加载图片时会显示红色
backgroundImage: NetworkImage(
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
)
3. Use el componente ClipOval para lograr esquinas redondeadas
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. Use el componente ClipRRect para lograr esquinas redondeadas para imágenes
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,
),
)