方式一：CircleAvatar
CircleAvatar可以实现圆角头像，也可以添加一个子Widget：
const CircleAvatar({
Key key,
this.child, // 子Widget
this.backgroundColor, // 背景颜色
this.backgroundImage, // 背景图像
this.foregroundColor, // 前景颜色
this.radius, // 半径
this.minRadius, // 最小半径
this.maxRadius, // 最大半径
})
我们来实现一个圆形头像：
注意一：这里我们使用的是NetworkImage，因为backgroundImage要求我们传入一个ImageProvider；
ImageProvider是一个抽象类，事实上所有我们前面创建的Image对象都有包含image属性，该属性就是一个ImageProvider
注意二：这里我还在里面添加了一个文字，但是我在文字外层包裹了一个Container；
这里Container的作用是为了可以控制文字在其中的位置调整；
classHomeContentextendsStatelessWidget{
@override
Widget build(BuildContext context) {
returnCenter(
child: CircleAvatar(
radius:100,
backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
child: Container(
alignment: Alignment(0,.5),
width:200,
height:200,
child: Text("兵长利威尔")
),
),
);
}
}
方式二：ClipOval
ClipOval也可以实现圆角头像，而且通常是在只有头像时使用
classHomeContentextendsStatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: ClipOval(
child: Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
height: 200,
),
),
);
}
}
3.3.2. 实现圆角图片
ClipRRect用于实现圆角效果，可以设置圆角的大小。
实现代码如下，非常简单：
classHomeContentextendsStatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
height: 200,
),
),
);
}
}
网友评论