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

您确定图像不是很重吗？首先检查图像尺寸。您也可以使用名为cache_network_image

的软件包

这很简单：

(4+3+2+1)/9

Answer 2

您还可以使用：

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

但是，是的，每个diegoveloper，您确定图像不是很大吗？ Listview可以呈现任何大小接近合理的东西。

Answer 3

有两个方法可以加快图像ListView的渲染速度。

第一个是在ListView构造函数中将cacheExtent属性设置为更大的值。此属性可控制渲染多少屏幕外小部件，并有助于使渲染开始更快一些。

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

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

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

Answer 4

您可以创建一个有状态的Widget，该Widget创建带有占位符图像的ListView，然后让它具有一个build()之后调用的异步方法，该方法从网络加载图像（一个一个），然后更改其状态。前面提到的小部件，用正确的图像替换占位符。另外，您可以创建一个存储图像的缓存，这样就不必每次ListView进入作用域时都下载它们（在这里，您可以使async方法在图像的缓存中查找，如果找不到的话）在那里，下载）。

作为旁注，这显然需要给ListView中的每个图像一个索引。

从网络加载图像时如何解决Listview滚动的问题

4 个答案: