Flutterでは、Container機能、CircleAvatarのbackgroundImage、ClipOvalコンポーネント、およびClipRRectコンポーネントを使用して角丸効果を実現できます。
1. コンテナの特性を活かしたカットと角丸加工
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プロパティを使用して角を丸くします。
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. ClipOval コンポーネントを使用して角を丸くします。
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 コンポーネントを使用して画像の角を丸くする
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,
),
)