文章目录
- 1. 概念介绍
- 2. 使用方法
- 2.1 基本用法
- 2.2 缓冲原理
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"FadeInImage组件"相关的内容,本章回中将介绍CachedNetworkImage组件.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的CachedNetworkImage组件主要用来缓冲和显示网络图片,这点从它的名字上就可以看出来,该组件可以确保图像能够快速、高效地加载,同时
又可以避免不必要的网络请求和资源浪费。该组件由cached_network_image这个三方包提供,它和官方提供的FadeInImage组件在功能上十分相似。我们本章回中
将详细介绍它的使用方法。
2. 使用方法
2.1 基本用法
和其它组件类似,CachedNetworkImage组件提供了相关的属性来控制自己,下面是该组件中常用的属性:
- imageUrl:该属性主要用来控制被加载的网络图片,它的值是一个图片网址;
- imageBuilder:该属性主要用来装饰被加载的图片,比如对图片进行缩放操作;
- errorWidget:该属性主要用来控制显示的错误提示图标或者文字;
- placeholder:该属性用来控制在加载网络图片之前显示的占位图片资源;
- fit:该属性主要用来控制图片如何适应其父容器,这个是图片类组件中最常用的属性;
- progressIndicatorBuilder:该属性用来显示图标加载进度,它是方法类型,进度值在方法参数中;
2.2 缓冲原理
CachedNetworkImage组件背后的缓冲原理是自己开发,它基于FlutterCacheManager组件实现。这两个组件都是一个名叫BaseFlow的组织(公司)提供。该组件的
缓冲原理:第一次运行时从网络下载图像,并将其缓存到本地。当下一次需要加载同一图像时,它会首先检查缓存中是否存在,如果存在,则直接从缓存中读取,这样就避
免了重复的网络请求和下载。我们在后面章回中将专门介绍FlutterCacheManager组件。
3. 示例代码