Flutter图片加载原理与缓存，颠覆认知

图片加载原理与缓存

在本书前面章节已经介绍过Image 组件，并提到Flutter框架对加载过的图片是有缓存的（内存），默认最大缓存数量是1000，最大缓存空间为100M。本节便详细介绍Image的原理及图片缓存机制，下面我们先看看ImageProvider 类。

14.5.1 ImageProvider

我们已经知道Image 组件的image 参数是一个必选参数，它是ImageProvider类型。下面我们便详细介绍一下ImageProvider，ImageProvider是一个抽象类，定义了图片数据获取和加载的相关接口。它的主要职责有两个：

1. 提供图片数据源
2. 缓存图片

我们看看ImageProvider抽象类的详细定义：

abstract class ImageProvider {

ImageStream resolve(ImageConfiguration configuration) {
// 实现代码省略
}
Future evict({ ImageCache cache,
ImageConfiguration configuration = ImageConfiguration.empty }) async {
// 实现代码省略
}

Future obtainKey(ImageConfiguration configuration);
@protected
ImageStreamCompleter load(T key); // 需子类实现
}

load(T key)方法

加载图片数据源的接口，不同的数据源的加载方法不同，每个ImageProvider的子类必须实现它。比如NetworkImage类和AssetImage类，它们都是ImageProvider的子类，但它们需要从不同的数据源来加载图片数据：NetworkImage是从网络来加载图片数据，而AssetImage则是从最终的应用包里来加载（加载打到应用安装包里的资源图片）。 我们以NetworkImage为例，看看其load方法的实现：

@override
ImageStreamCompleter load(image_provider.NetworkImage key) {

final StreamController chunkEvents = StreamController();

return MultiFrameImageStreamCompleter(
codec: _loadAsync(key, chunkEvents), //调用
chunkEvents: chunkEvents.stream,
scale: key.scale,
… //省略无关代码
);
}

我们看到，load方法的返回值类型是ImageStreamCompleter ，它是一个抽象类，定义了管理图片加载过程的一些接口，Image Widget中正是通过它来监听图片加载状态的（我们将在下面介绍Image 原理时详细介绍）。

MultiFrameImageStreamCompleter 是 ImageStr