flutter - 从网络加载图像时如何修复 Listview 滚动卡顿

Question

我正在使用 Image.network 使用以下代码为列表中的每个项目加载图像:

Image getEventImageWidget(AustinFeedsMeEvent event) {
return event.photoUrl.isNotEmpty ?
          Image.network(
            event.photoUrl,
            width: 77.0,
            height: 77.0,
          ) : Image.asset(
            'assets/ic_logo.png',
            width: 77.0,
            height: 77.0,
          );
}

当我上下滚动时，加载图像时列表有时会挂起。有没有办法可以在后台线程上加载图像？我可以做些什么来帮助修复滚动性能？

注意:当我回头看时，我发现我使用的图像非常大。

Answer 1

有两个是为了加快你的 ListView 图像的渲染速度。

首先是在 ListView 构造函数中将 cacheExtent 属性设置为更大的值。此属性控制渲染屏幕外小部件的数量，并有助于加快渲染开始。

第二个是使用 precacheImage 预缓存您的图像. Flutter 具有内存缓存，因此通常需要将所有内容缓存到磁盘以获得良好的读取性能。相反，您可以要求 Flutter 提前下载这些图像，以便在构建小部件时准备好它们。例如，如果你有一张图片的 url 列表，那么在 initState 方法中，你可以让 Flutter 缓存所有这些。

final List<String> imageUrls = [ /* ... */ ];

@override
void initState() {
  for (String url in imageUrls) {
    precacheImage(new NetworkImage(url), context);
  }
  super.initState();
}