首先,一般来说,从服务器读取的图片一般都是矩形,如果页面需要一个圆形图片,那么这个时候都是前端自己来处理。在Flutter中自带了两个组件来帮助我们实现圆形头像框的开发,也可以使用普通的Container组件进行自定义一个圆。
1. CircleAvatar 组件
一般常用该组件的2个属性就能实现我们想要的结果,一是 backgroundImage ,二是radius
注意:radius 是代表的半径
CircleAvatar(
radius: 40.0, // 尺寸, 宽高一样, 代表的是半径,如果需要一个80x80尺寸的元素,那么配置为40即可
backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"), // 从接口中获取的图片的URL地址
),
2. ClipOval 组件
同理,想要一个圆形头像,那么还是要设定这个元素的宽高,以及图片的URL地址,但是相对于CircleAvatar组件,使用ClipOval组件,需要我们自己定义图片的平铺方式,就需要加上fit属性
ClipOval(
child: Image.network(
width: 80, // 宽
height: 80, // 高
"https://www.itying.com/images/flutter/1.png", // 图片的地址
fit: BoxFit.cover, // fit代表该元素图片的平铺方式,一般采用cover,这个可以通过BoxFit自己点击进入BoxFit属性源码中给的值,包括:fill,contain等尝试各个值不同的效果,按需赋值即可
),
),
3. 也可以通过自定义一个Container容器组件来实现,主要就是给Container的decoration属性赋值一个圆角borderRadius 和 一个 Decoration属性
SizedBox(
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40), // 圆角设置为宽高的一半,那么这个容器就是一个圆了
image: const DecorationImage( // DecorationImage 是指给这个Container组件设置一个背景图,因为原图不是我们所需要的形状,那么我们就通过设置背景图来进行裁剪
image:NetworkImage("https://www.itying.com/images/flutter/1.png"),
fit: BoxFit.cover
)
),
),
)
4.接下来一组完整代码可以参考
效果如下图: