如何修复从网络加载图像时的Listview滚动jank

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的渲染速度。

第一种方法是在cacheExtent构造函数中将ListView属性设置为更大的值。此属性控制呈现多少屏幕外窗口小部件，并通过使呈现更快地启动而有所帮助。

第二种方法是使用precacheImage预缓存图像。Flutter有一个内存缓存，所以通常有必要将所有内容缓存到磁盘上，以获得良好的读取性能。相反，您可以要求Flutter提前下载这些图像，以便它们在构建小部件时已经准备好了。例如，如果您有图像的urls列表，那么在initState方法中，您可以请求Flutter缓存所有这些urls。

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

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

Answer 2

你确定你的图像不是很重吗？首先检查图像的大小。您还可以使用名为：图像的包

很简单：

new Image(image: new CachedNetworkImageProvider(url))

更新(包已更新)

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => new CircularProgressIndicator(),
        errorWidget: (context, url, error) => new Icon(Icons.error),
     ),

Answer 3

您还可以使用：

FadeInImage.assetNetwork(
  placeholder: 'assets/ic_logo.png',
  image: event.photoUrl,
  height: 77.0,
  width: 77.0,
  fit: BoxFit.cover,
  fadeInDuration: new Duration(milliseconds: 100),
),

但是，是的，你确定你的照片不是很大吗？Listview在呈现任何大小接近合理的东西时都没有问题。