企业网站建设公司司龙华区城市建设局网站

我们在上一章回中介绍了"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. 示例代码