用户向下滚动屏幕后如何清除图像缓存，如果向上滚动则重新加载？答案

【问题标题】：How can I clear the image cache after my user scroll down the screen, and reload if it scroll up?用户向下滚动屏幕后如何清除图像缓存，如果向上滚动则重新加载？
【发布时间】：2021-07-22 18:04:02
【问题描述】：

如何在用户向下滚动屏幕后清除图像缓存，如果向上滚动则重新加载？

当用户向下滚动带有图像的新闻卡时，我有一个惰性列表视图，这些图像是从网络加载的。当许多图像加载到 500 左右时，应用程序开始“慢”，我想这是因为缓存中有很多图像，我的图像只有 100 像素。

【问题讨论】：

标签： flutter dart

【解决方案1】：

重要提示，只是在图像缓存中添加更多图像不太可能导致性能下降，尤其是当您使用ListView.builder() 显示它们时。检查您没有在调试模式下运行，这会严重影响性能，并确保在尝试优化性能之前进行配置。

话虽如此，如果你知道 Flutter 的图像缓存中图像的键，你可以通过调用来删除图像

imageCache!.evict(key);

不同类型的ImageProvider 具有不同的键，但鉴于您是从网络获取图像，我假设您使用的是NetworkImage（或Image.network，它在后台使用NetworkImage） .

然后您可以创建一个包装Image 的小部件，并在它被释放后将其从缓存中逐出。也许是这样的：

class DisposingNetworkImage extends StatefulWidget {
  final NetworkImage image;
  // boilerplate
}

class DisposingNetworkImageState extends State<DisposingNetworkImage> {
  @override
  void dispose() {
    imageCache!.evict(widget.image);
    super.dispose();
  }

  @override
  Widget build(BuildContext) => Image(
    image: widget.image,
  );
}

然后您可以在其他小部件中使用它，例如：

DisposingNetworkImage(image: NetworkImage('https://example.com/my-image'))

【讨论】：

【解决方案2】：

您应该尝试使用 cached_network_image 插件中的 CachedNetworkImage 小部件。

它需要 cacheHeight 和 cacheWidth 参数。不要忘记提供这些值。

参考：https://pub.dev/packages/cached_network_image.

【讨论】：