方式一：CircleAvatar
CircleAvatar可以實(shí)現(xiàn)圓角頭像管搪，也可以添加一個(gè)子Widget：
const CircleAvatar({
? Key key,
? this.child, // 子Widget
? this.backgroundColor, // 背景顏色
? this.backgroundImage, // 背景圖像
? this.foregroundColor, // 前景顏色
? this.radius, // 半徑
? this.minRadius, // 最小半徑
? this.maxRadius, // 最大半徑
})
我們來實(shí)現(xiàn)一個(gè)圓形頭像：
注意一：這里我們使用的是NetworkImage暴心，因?yàn)閎ackgroundImage要求我們傳入一個(gè)ImageProvider；
ImageProvider是一個(gè)抽象類佩耳，事實(shí)上所有我們前面創(chuàng)建的Image對(duì)象都有包含image屬性代虾，該屬性就是一個(gè)ImageProvider
注意二：這里我還在里面添加了一個(gè)文字栈戳，但是我在文字外層包裹了一個(gè)Container安聘；
這里Container的作用是為了可以控制文字在其中的位置調(diào)整；
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也可以實(shí)現(xiàn)圓角頭像麦向，而且通常是在只有頭像時(shí)使用
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. 實(shí)現(xiàn)圓角圖片
ClipRRect用于實(shí)現(xiàn)圓角效果瘟裸，可以設(shè)置圓角的大小。
實(shí)現(xiàn)代碼如下磕蛇，非常簡單：
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,
? ? ? ? ),
? ? ? ),
? ? );
? }
}
