Flutter：无OOM显示大量图片答案

【问题标题】：Flutter: Display a large amount of images without OOMFlutter：无OOM显示大量图片
【发布时间】：2019-01-01 06:11:43
【问题描述】：

我正在尝试制作一个图书阅读器，它只允许您阅读一本书。这本书的页数有限（228），每页都有网址。

现在，我试图在 ListView 中显示所有图像，但它一次加载所有图像，并且它们的大小超过 1GB，因此应用程序崩溃，并显示内存不足错误。

如何释放 ListView 中不可见项的内存，然后在滚动回它时再次加载它们？

我当前构建 LinearView 的代码如下

new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new ListView.builder(
          padding: new EdgeInsets.all(8.0),
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(MyApp.imageLinks.values.elementAt(index));
          },),
        // This trailing comma makes auto-formatting nicer for build methods.
      );

但正如我所说，它会引发 OOM 错误。

我的设备有 3GB 的硬件内存，这还不够。

提前致谢。

【问题讨论】：

我只想指出，1GB 绝对是一个疯狂的图像大小，可以尝试在手机上加载。您应该强烈考虑将图像分辨率降低很多很多倍
Out of memory when displaying images in ListView 的可能副本，尽管从技术上讲，这可能是这个的副本。看起来这是重复发布的。
@JonahWilliams 我知道这是几年前的事了，但 1GB 是所有图像加在一起的大小，而不仅仅是单个图像。大约有 300 张图片，这些图片是可以在网上找到的免费书籍的页面，该应用程序旨在用作基于章节的指南。 1GB 对于 300 张图片似乎是可行的。
@MGlolenstine 你解决了这个问题吗？你能分享任何想法吗？

标签： android dart flutter

【解决方案1】：

试试看extended_image的包。

强大的官方图片扩展库，支持占位符（加载）/失败状态，缓存网络，缩放平移图像，照片视图，滑出页面，编辑器（裁剪，旋转，翻转），绘画自定义等等

您还可以查看有关“Loading images”的文档：

Flutter 可以为当前设备加载分辨率合适的图片像素比。

这个想法来自this SO post，我认为你的情况相同。

如果您更有可能从网络获取图片，确保它们的尺寸合适，并提供不同的尺寸如果你可以的话。如果您无法控制该集合 cacheWidth 和 cacheHeight in Image.memory 这些将减少缓存中的图像内存（RAM）。 默认情况下，Flutter 会完整缓存图像分辨率，尽管它们在设备/应用中的外观尺寸。为了例如，如果您希望图像显示在 200x200 框中，则设置 cacheWidth 到 200 * window.devicePixelRatio.ceil() 你会发现 window 在dart:ui 中，如果只设置cacheWidth，则您的图像将保持真实。如果您只设置cacheHeight，也是如此。也请按照建议使用ListView.builder。

【讨论】：

感谢您回答这个问题 :) 我已经通过使用占位符解决了这个问题，因为问题是图像在页面打开后立即加载。它们同时加载的原因是由于空行高 0px，并且它们都同时显示。