Flutter中CachedNetworkImage重复请求同URL图片的原因与解决方法

这不是CachedNetworkImage的正常行为，你的代码和配置里有几个关键问题导致了重复的网络请求，以下是具体分析和解决方法：

核心问题：占位符嵌套了Image.network #

你的placeholder中同时放置了骨架屏和Image.network(url)，这会直接导致每次加载图片时额外发起一次无缓存的网络请求——Image.network不会复用CachedNetworkImage的缓存管理器，它会绕过你的缓存配置直接从网络拉取图片，这是流量异常消耗的主要原因。

修复方法 #

删除占位符里的Image.network，只保留骨架屏即可。CachedNetworkImage本身会在缓存命中时直接展示缓存图片，缓存未命中时才会发起网络请求并显示占位符：

placeholder: (context, url) {
  return const SkeletonAvatar(
    style: SkeletonAvatarStyle(
      shape: BoxShape.rectangle,
    ),
  );
},

次要问题：CacheManager配置不完整 #

你仅设置了stalePeriod（缓存过期后重新验证的时间），但缺少maxAgeCacheObject（缓存文件的最长保存时间），这可能导致缓存的图片被提前清理。建议补充完整配置：

final CacheManager diaryCacheManager = CacheManager(
  Config(
    'diary_image',
    stalePeriod: const Duration(days: 2),
    maxAgeCacheObject: const Duration(days: 7), // 缓存文件最长保存7天
    repo: JsonCacheInfoRepository(databaseName: 'diary_image_cache'), // 指定缓存数据库名称
  ),
);

额外检查项 #

1. Supabase Storage URL稳定性
   如果你的图片存储为私有桶，Supabase生成的URL会带有临时签名（默认有效期1小时），每次生成的URL不同会导致CachedNetworkImage认为是新图片，重新发起请求。解决方法：

   • 将图片桶设为公共存储（适合无权限要求的内容）
   • 生成签名时设置更长有效期：

     final url = supabase.storage.from('your-bucket').getPublicUrl('image-path', expiresIn: Duration(days: 7));
     

2. 服务器缓存响应头
   检查Supabase返回图片时的Cache-Control响应头，如果服务器返回no-cache或max-age=0，会强制CachedNetworkImage每次验证缓存，可能触发额外请求。可以通过CacheManager覆盖服务器头：

   Config(
     // ...其他配置
     fileService: HttpFileService(
       headers: {'Cache-Control': 'public, max-age=172800'}, // 强制设置2天缓存有效期
     ),
   );
   

3. memCacheHeight一致性
   确保widthMemCache(context, size)返回的高度在加载同一张图片时保持一致，如果尺寸频繁变化，CachedNetworkImage会认为是不同图片，重新缓存和请求。

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