第三百二十三回

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

///装饰图片：给图片添加滤镜
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))，

我们在上面的示例代码中演示了该组件的三种使用方法，大家可以参考代码中的注释。此外，上面的示例代码不是我写的，它们来自该组件的官方文档，组件中使用的网络
图片可以正常使用，我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

4. 内容总结

我们在本章回中介绍的CachedNetworkImage组件和上一章回中介绍的FadeInImage组件都可以加载和显示网络图片，它们都提供了相似的属性来实现占位符和错误处
理功能。不过CachedNetworkImage组件还提供了装饰图片的属性，以及获取图片加载进度的属性。最后，我们对本章回中的内容做一个全面的总结：

• 我们可以使用CachedNetworkImage组件来加载和显示网络图片；
• 我们可以使用CachedNetworkImage组件来实现占位符和错误处理功能;
• 可以使用CachedNetworkImage组件相关的属性来装饰图片和获取图片加载进度；
• 可以在官方的Image组件中使用CachedNetworkImage组件来显示和加载网络图片；
  看官们，与"CachedNetworkImage组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!