Flutter使用cached_network_image缓存图片重启后重加载如何实现持久化存储？

重启后缓存失效是因为默认配置下缓存仅存在内存和系统临时目录，临时目录随时可能被系统清理，下面给出两种落地性高的实现方案：

方案1：调整现有库的持久化配置（优先推荐） #

cached_network_image 底层依赖缓存管理组件，你可以通过自定义缓存配置，将图片存储到应用永久目录，缓存元数据自动存在内置sqlite中，无需额外开发数据库逻辑：

1. 自定义全局持久化缓存管理器，指定缓存存储路径为应用文档目录（系统不会主动清理，仅用户卸载或手动清应用存储时才会删除），自行设置缓存有效期、最大缓存数量：

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as path;

class PersistentCacheManager extends CacheManager {
  static const cacheKey = 'persistentImageCache';
  static PersistentCacheManager? _instance;

  factory PersistentCacheManager() {
    _instance ??= PersistentCacheManager._internal();
    return _instance!;
  }

  PersistentCacheManager._internal() : super(
    Config(
      cacheKey,
      // 缓存有效期30天，可自行调整
      stalePeriod: const Duration(days: 30),
      // 最大缓存1000个文件，可自行调整
      maxNrOfCacheObjects: 1000,
      repo: JsonCacheInfoRepository(databaseName: cacheKey),
      fileService: HttpFileService(),
      getCacheDirectory: () async {
        // 存储到应用永久文档目录
        final appDocDir = await getApplicationDocumentsDirectory();
        final targetDir = path.join(appDocDir.path, cacheKey);
        return Directory(targetDir);
      },
    ),
  );
}

2. 加载图片时传入自定义的缓存管理器即可：

CachedNetworkImage(
  imageUrl: "你的图片链接",
  cacheManager: PersistentCacheManager(),
  // 其余原有配置保持不变
)

方案2：自行实现数据库存储缓存（适合需要完全控制缓存逻辑的场景） #

如果需要自定义缓存规则，可直接将图片二进制数据和对应索引存在本地数据库中：

1. 优先选用轻量数据库实现，比如Hive（原生支持二进制数据存储，性能较高）或sqflite，存储字段包含：图片唯一标识（一般用url）、图片二进制字节、缓存过期时间
2. 图片加载逻辑：先查询本地数据库是否存在对应url的未过期缓存，存在则直接读取字节渲染，不存在则发起网络请求，请求成功后将数据存入数据库再渲染，示例逻辑参考：

// Hive存储的缓存实体示例
@HiveType(typeId: 0)
class LocalCachedImage extends HiveObject {
  @HiveField(0)
  String imageUrl;
  @HiveField(1)
  Uint8List imageBytes;
  @HiveField(2)
  DateTime expireTime;

  LocalCachedImage({
    required this.imageUrl,
    required this.imageBytes,
    required this.expireTime,
  });
}

// 加载逻辑示例
Future<Widget> getCachedImage(String url) async {
  final cacheBox = Hive.box<LocalCachedImage>('imageCache');
  // 查找本地有效缓存
  final cachedItem = cacheBox.values.firstWhereOrNull(
    (item) => item.imageUrl == url && item.expireTime.isAfter(DateTime.now())
  );
  if (cachedItem != null) {
    return Image.memory(cachedItem.imageBytes);
  }
  // 无缓存走网络请求
  final resp = await http.get(Uri.parse(url));
  if (resp.statusCode == 200) {
    final bytes = resp.bodyBytes;
    // 存入本地数据库
    await cacheBox.add(LocalCachedImage(
      imageUrl: url,
      imageBytes: bytes,
      expireTime: DateTime.now().add(const Duration(days: 30)),
    ));
    return Image.memory(bytes);
  }
  return const Icon(Icons.broken_image);
}

注意事项 #

• 两种方案存储路径均为应用私有目录，无需申请额外存储权限
• 建议定期清理过期缓存，避免占用过多用户存储空间
• 大数量、大体积图片场景优先使用方案1，经过社区验证性能和稳定性更高

内容的提问来源于stack exchange，提问作者Al-Hashimy