Flutter 10完整进化详解：深入图像加载流程

reassemble

那又怎么样？现在回顾一下一开始的流程图。是不是感觉一切都清楚了？

2。本地图片缓存

了解了上面的流程，我们知道Flutter实现了内存中图片缓存，但没有实现本地图片缓存，所以我们的出发点应该是从ImageProvider开始。

根据上面对NetworkImage的分析，我们知道图片是通过http通过_loadAsync

_loadAsync方法加载的，所以我们加载 NetworkImage 简历 复制代码，编辑_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);
  }
复制代码

3.其他插件。缓存量

关于闲鱼 Flutter Web 应用内存分析文章详细分析了图片加载导致的内存问题，其中之一就是ImageCache 问题。

我们知道上面的流程，ImageCache缓存了一个异步对象。缓存异步加载对象的一个​​问题是，在图像加载和解码之前你无法知道会消耗多少内存，并且大量图像的加载会导致解码任务产生大量 IO。

在Flutter中ImageCache默认缓存大小为

const int _kDefaultSize = 1000;
const int _kDefaultSizeBytes = 100 << 20; // 100 
复制代码

所以简单粗暴的做法是：tingb.simage.inchem.inchem。 ;