如何使用cached_network_image预加载图像？

Question

我刚刚实现了 Flutter包cached_network_image，我想知道如何预加载图像，以便稍后可以立即使用它们。我从我们的服务器检索稍后将使用的所有图像网址。

我已经定义了自定义缓存管理器 getter：

class LocalCacheManager {
  static const key = 'customCacheKey';
  static CacheManager instance = CacheManager(
    Config(
      key,
      stalePeriod: const Duration(days: 14),
      maxNrOfCacheObjects: 200,
      repo: JsonCacheInfoRepository(databaseName: key),
      fileSystem: LocalCacheFileSystem(key),
      fileService: HttpFileService(),
    ),
  );
}

以下是我目前尝试预加载图像的方法：

LocalCacheManager.instance.downloadFile(MY_IMAGE_URL)),

这是我创建小部件的方法：

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL, cacheManager: LocalCacheManager.instance),

但我可以清楚地看到，一旦创建 CachedNetworkImage，文件总是会再次缓存。

Answer 1

您可以像这样使用Flutter 缓存管理器

DefaultCacheManager().downloadFile(MY_IMAGE_URL).then((_) {});

稍后，像这样使用缓存的图像

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),

Answer 2

最简单可行的方法是将 precacheImage （flutter 内置函数）与 CachedNetworkImageProvider 结合使用：

Image image = Image(
        image: CachedNetworkImageProvider(/* url */),
        fit: BoxFit.cover,
      );

      precacheImage(image.image, context);

      return Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8.0),
                child: image,
              ),
            );