Flutter CachedNetworkImage 不断重新加载之前加载的图片

Question

我在 Flutter 中使用 CachedNetworkImage 小部件从 Firebase 存储下载链接加载图像。尽管图像被缓存，但我注意到每次页面转换时图像加载都会出现延迟，就好像图像正在从头开始重新加载一样。这会严重影响用户体验，因为即使对于之前加载（缓存）的图像也会出现明显的延迟。

示例视频

我希望这些图像立即显示，没有任何延迟。

这是我用来返回小部件的函数：

class CustomCacheManager {
  static const key = 'imageCache';

  static CacheManager instance = CacheManager(
    Config(
      key,
      stalePeriod: const Duration(days: 1),
      maxNrOfCacheObjects: 100, // 최대 캐시 객체 수를 100개로 제한
      repo: JsonCacheInfoRepository(databaseName: key),
      fileService: HttpFileService(),
    ),
  );
}

Widget getImage(String imageUrl) {
  try {
    if (imageUrl == '') {
      return const SizedBox.shrink();
    } else {
      return Container(
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 2.0),
              borderRadius: BorderRadius.circular(10.0)),
          child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: CachedNetworkImage(
                imageUrl: imageUrl,
                cacheManager: CustomCacheManager.instance,
                placeholder: (context, url) => const SkeletonItem(
                    child: SizedBox.shrink()),
                errorWidget: (context, url, error) => const Icon(Icons.error),
                fit: BoxFit.fill,
              )));
    }
  } catch (e) {
    return const SizedBox.shrink();
  }
}

任何人都可以解释为什么会发生这种情况并建议任何解决方案来确保在页面之间导航时立即从缓存加载图像吗？

Answer 1

在缓存图像时，内部

OctoImage

小部件仍然需要一些时间从缓存加载图像。要最小化淡入淡出持续时间，最好的方法是将

fadeInDuration

设置为

Duration.zero

。

CachedNetworkImage(
  fadeInDuration: Duration.zero,
  // ...
)

---

注意：cached_network_image使用octo_image来渲染图像小部件。