Flutter能否在同一Widget内实现网络图片的缓存与读取

单Widget内闭环实现（无第三方封装依赖） #

直接在当前游戏列表页的State中维护双层缓存，完全不需要全局改动，逻辑可控：

• 在State内初始化两个缓存结构：Map结构的内存缓存存已加载的图片实例，磁盘缓存存本地已存储的图片文件路径，内存缓存用于页面切回时快速渲染，磁盘缓存用于应用重启后避免重复下载
• 加载图片严格按优先级走：先查内存缓存，命中直接返回渲染；内存未命中查本地磁盘是否存在对应缓存文件，存在则读文件渲染并写入内存缓存；两者都未命中才发起网络请求，请求成功后将图片同时写入内存和磁盘缓存
• 不要在页面dispose生命周期里手动清空内存缓存，若页面做了保活处理，切回时可以直接命中缓存；就算页面被销毁重建，磁盘缓存的内容也不会丢失

核心实现代码参考：

// 列表页State内的缓存与加载逻辑
final Map<String, ImageProvider> _memCache = {};
final Map<String, String> _diskPathCache = {};

Future<ImageProvider> _loadImage(String url) async {
  // 内存缓存命中直接返回
  if (_memCache.containsKey(url)) return _memCache[url]!;
  // 磁盘缓存命中直接返回
  if (_diskPathCache.containsKey(url)) {
    final cacheFile = File(_diskPathCache[url]!);
    if (await cacheFile.exists()) {
      final img = FileImage(cacheFile);
      _memCache[url] = img;
      return img;
    }
  }
  // 缓存未命中，走网络拉取
  final resp = await http.get(Uri.parse(url));
  final tempDir = await getTemporaryDirectory();
  final saveFile = File('${tempDir.path}/avatar_${url.hashCode}.img');
  await saveFile.writeAsBytes(resp.bodyBytes);
  final networkImg = FileImage(saveFile);
  _memCache[url] = networkImg;
  _diskPathCache[url] = saveFile.path;
  return networkImg;
}

列表项中使用FutureBuilder对接上述方法即可，只要图片URL不变，切换页面返回时不会触发重复下载。

成熟组件方案（适配扩展需求） #

如果后续需要加加载占位图、失败重试、缓存容量管控、过期清理这类能力，直接用封装好的缓存图片组件即可，组件内部默认实现了内存+磁盘双缓存逻辑，不需要自己维护缓存结构：

• 直接替换原有Image.network组件，传入图片URL即可生效，默认配置下切页返回不会重复发起网络请求
• 支持自定义缓存规则，比如头像类资源可以配置为长期缓存，仅在用户更新头像时清理对应key的缓存即可
• 注意不要给图片组件传入随机生成的Key，否则组件会被识别为全新实例，触发重复下载。

避坑提示：如果你的头像资源存放在Firebase Storage，生成的下载链接如果带动态过期签名参数，每次从Firestore拿到的URL可能存在参数差异，会被判定为新资源重复下载。这种场景不要用完整URL作为缓存Key，取图片的存储路径或者资源唯一ID作为缓存Key即可。

内容的提问来源于stack exchange，提问作者ThorEpNorway