如何在从网络加载图像时修复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 提前下载这些图像，以便在构建小部件时准备就绪。例如，如果您有一个图像的 url 列表，那么在一个initState方法中，您可以要求 Flutter 缓存所有这些。

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

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

Answer 2

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

这很简单：

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),
     ),