2分钟
07 本地图片缓存
通过上方流程的了解，我们知道 Flutter 实现了图片的内存缓存，但是并没有实现图片的本地缓存，所以我们入手的点，应该从 ImageProvider 开始。
通过上面对 NetworkImage 的分析，我们知道图片是在 _loadAsync 方法通过 http 下载的，所以最简单的就是，我们从 NetworkImage cv 一份代码，修改 _loadAsync 支持 http 下载前读取本地缓存，下载后通过将数据保存在本地。
结合 flutter_cache_manager 插件，如下方代码所示，就可以快速简单实现图片的本地缓存：
Future<ui.Codec> _loadAsync(NetworkImage key) async {
assert(key == this);
/// add this start
/// flutter_cache_manager DefaultCacheManager
final fileInfo = await DefaultCacheManager().getFileFromCache(key.url);
if(fileInfo != null && fileInfo.file != null) {
final Uint8List cacheBytes = await fileInfo.file.readAsBytes();
if (cacheBytes != null) {
return PaintingBinding.instance.instantiateImageCodec(cacheBytes);
}
}
/// add this end
final Uri resolved = Uri.base.resolve(key.url);
final HttpClientRequest request = await _httpClient.getUrl(resolved);
headers?.forEach((String name, String value) {
request.headers.add(name, value);
});
final HttpClientResponse response = await request.close();
if (response.statusCode != HttpStatus.ok)
throw Exception('HTTP request failed, statusCode: ${response?.statusCode}, $resolved');
final Uint8List bytes = await consolidateHttpClientResponseBytes(response);
if (bytes.lengthInBytes == 0)
throw Exception('NetworkImage is an empty file: $resolved');
/// add this start
await DefaultCacheManager().putFile(key.url, bytes);
/// add this edn
return PaintingBinding.instance.instantiateImageCodec(bytes);
}
学员评价