1.实现圆角头像
方式一：CircleAvatar
CircleAvatar buildCircleAvatar() {
return CircleAvatar(
radius: 100,
backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
child: Container(
alignment: Alignment(0,.5),
width: 200,
height: 200,
child: Text("兵长利威尔"),
),
);
}
image.png
方式二：ClipOval
- ClipOval也可以实现圆角头像，而且通常是在只有头像时使用
ClipOval get buildClipOval {
return ClipOval(
child: Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
height: 200,
),
);
}
image.png
方式三：Container+BoxDecoration
Container buildContainerRadius() {
return Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
image: DecorationImage(
image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
),
),
);
}
image.png
2.实现圆角图片
方式一：ClipRRect
- ClipRRect用于实现圆角效果，可以设置圆角的大小。
ClipRRect buildClipRRect() {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
height: 200,
),
);
}
image.png
方式二：Container+BoxDecoration
Container buildContainerRadius() {
return Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
),
),
);
}
image.png
学习内容来自Flutter从入门到实战
