我们在本章回中介绍的CachedNetworkImage组件主要用来缓冲和显示网络图片,这点从它的名字上就可以看出来,该组件可以确保图像能够快速、高效地加载,同时
又可以避免不必要的网络请求和资源浪费。该组件由cached_network_image这个三方包提供,它和官方提供的FadeInImage组件在功能上十分相似。我们本章回中
将详细介绍它的使用方法。
和其它组件类似,CachedNetworkImage组件提供了相关的属性来控制自己,下面是该组件中常用的属性:
CachedNetworkImage组件背后的缓冲原理是自己开发,它基于FlutterCacheManager组件实现。这两个组件都是一个名叫BaseFlow的组织(公司)提供。该组件的
缓冲原理:第一次运行时从网络下载图像,并将其缓存到本地。当下一次需要加载同一图像时,它会首先检查缓存中是否存在,如果存在,则直接从缓存中读取,这样就避
免了重复的网络请求和下载。我们在后面章回中将专门介绍该组件。
///装饰图片:给图片添加滤镜
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
///显示图片加载进度
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
progressIndicatorBuilder: (context, url, downloadProgress) =>
CircularProgressIndicator(value: downloadProgress.progress),
errorWidget: (context, url, error) => Icon(Icons.error),
),
///和官方组件配合使用
Image(image: CachedNetworkImageProvider(url)),
我们在上面的示例代码中演示了该组件的三种使用方法,大家可以参考代码中的注释。此外,上面的示例代码不是我写的,它们来自该组件的官方文档,组件中使用的网络
图片可以正常使用,我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
我们在本章回中介绍的CachedNetworkImage组件和上一章回中介绍的FadeInImage组件都可以加载和显示网络图片,它们都提供了相似的属性来实现占位符和错误处
理功能。不过CachedNetworkImage组件还提供了装饰图片的属性,以及获取图片加载进度的属性。最后,我们对本章回中的内容做一个全面的总结: