如何使用 cached_network_image 预加载图像？答案

【问题标题】：How to preload images with cached_network_image?如何使用 cached_network_image 预加载图像？
【发布时间】：2021-04-09 03:40:09
【问题描述】：

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

我已经定义了我的自定义缓存管理器 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，文件总是会再次被缓存。

【问题讨论】：

我必须承认我的解决方案有效...我使用另一个包来显示带有淡入动画的图像，这就是为什么我没有看到太大的区别。因此，如果有人想知道如何预加载缓存的网络图像，那就去吧。

标签： flutter

【解决方案1】：

 cached_network_image: ^2.0.0 
            CachedNetworkImage(
                      imageUrl: yoururl,
                      errorWidget: (context, url, error) => Text("error"),
                      imageBuilder: (context, imageProvider) => CircleAvatar(
                        radius: 120,
                        backgroundImage: imageProvider,
                      ),
                      placeholder: (context, url) => CircularProgressIndicator(
                        backgroundColor: primary,
                      ),
                    ),

【讨论】：

【解决方案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,
              ),
            );

【讨论】：

【解决方案3】：

你可以像这样使用Flutter Cache Manager

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

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

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),

【讨论】：