GridView 滚动滞后中的 Flutter Images

Question

我正在尝试从 URL 获取图像，然后将它们全部放入 GridView 并滚动它们。在模拟器中，滚动非常滞后，滚动时 cpu 使用率始终为 100%。在将图像放入 GridView 之前，我应该对图像做些什么吗？

代码很简单，像这样。

final List<String> urls = [url1, url2, url3, url4];

GridView.builder(
  itemCount: urls.length,
  itemBuilder: (context, index) => Image.network(urls[index])
)

我也尝试过使用 CachedNetworkImage，同样的事情发生了。图像大小是您从 iPhone 相机获得的典型图像大小。

Answer 1

请记住，模拟器永远不会给您与物理设备相同的体验，特别是如果您在 Debug模式下运行，请尝试在 Release模式下运行 (flutter run --release)。

也就是说，如果列表中没有很多图像，您可以尝试在开始时像这样预缓存图像(也许是 initState)。

urls.forEach((url){
    precacheImage(NetworkImage(url),context);
});