关于Flutter中extended_image包缓存功能的技术问询

首先明确：ExtendedImage.network的cache参数默认就是true，直接调用该方法加载网络图片时，会自动进行内存和磁盘缓存。

1. 如何缓存网络图片 #

• 基础用法：直接使用默认配置即可自动缓存，无需额外设置cache参数

  ExtendedImage.network(
    'https://example.com/your_image.jpg',
  );
  

• 自定义缓存规则：如果需要调整缓存大小、过期时间或存储路径，可以通过cacheManager指定自定义缓存管理器：

  import 'package:extended_image/extended_image.dart';
  
  // 初始化自定义缓存配置
  final customCacheManager = ExtendedCacheManager(
    config: CacheConfig(
      maxCacheSize: 80 * 1024 * 1024, // 缓存上限80MB
      maxCacheAge: Duration(days: 3), // 缓存3天后过期
      cachePath: 'app_custom_image_cache', // 自定义缓存目录名
    ),
  );
  
  // 使用自定义缓存加载图片
  ExtendedImage.network(
    'https://example.com/your_image.jpg',
    cacheManager: customCacheManager,
  );
  

2. 如何使用缓存图片 #

• 自动优先加载缓存：正常调用ExtendedImage.network时，框架会先检查内存缓存，再检查磁盘缓存，存在缓存则直接加载，无需额外操作。
• 强制从缓存加载：如果想跳过网络请求，仅使用缓存资源，可以设置disableNetwork为true，缓存不存在时会触发错误回调：

  ExtendedImage.network(
    'https://example.com/your_image.jpg',
    disableNetwork: true,
    errorWidget: (context, url, error) => Text('无可用缓存'),
  );
  

3. 如何检查当前加载的是缓存图片 #

• 通过加载状态回调判断：利用loadStateChanged回调，在图片加载完成后校验来源：

  ExtendedImage.network(
    'https://example.com/your_image.jpg',
    loadStateChanged: (state) {
      if (state.extendedImageLoadState == LoadState.completed) {
        final imageProvider = state.imageProvider as ExtendedNetworkImageProvider;
        // 检查内存缓存
        final isMemoryCached = imageProvider.memoryCache?.containsKey(imageProvider.cacheKey) ?? false;
        // 检查磁盘缓存
        imageProvider.getFileFromCache(imageProvider.cacheKey).then((cacheFile) {
          if (cacheFile != null) {
            print('图片来自磁盘缓存');
          } else if (isMemoryCached) {
            print('图片来自内存缓存');
          } else {
            print('图片来自网络');
          }
        });
      }
      return null;
    },
  );
  

• 查看缓存目录：使用path_provider包获取应用缓存路径，找到extended_image的缓存文件夹，核对是否存在对应URL的哈希命名文件。
• 开启调试日志：设置debugLog为true，控制台会打印图片加载来源的日志信息：

  ExtendedImage.network(
    'https://example.com/your_image.jpg',
    debugLog: true,
  );
  

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