在 Flutter 中显示 100 张或更多图像的最快方法

Question

此问题的目的是找到显示图库中大量图像（20 或更多）的最佳方式。我需要在设备上显示所有照片。正如您所看到的，可能会显示很多图像，当我尝试使用不同的 Image.file() 小部件显示所有图像时，我的手机 (LG G2) 变慢，然后应用程序完全崩溃。

我认为问题是我在 5 年旧设备上加载大量 4K 图像（超过 100 张）。屏幕上实际同时显示的图像实际上大约是 15 个，但我需要有一个类似画廊的东西，所以所有图像都在 GridView 中。

所以，我不认为这是最好的选择，也许有一个功能可以将图像缩小到 100x100 像素。但在网上查找我找不到任何东西。那么，有没有更好的办法呢？

我使用 Android 平台通道获取所有图像路径及其文件夹。

我将它们全部放在这样的列表中：[[“Camera”，“storage/emulated/0/downloads/1.png”]等]

这是我得到的用户界面：（抱歉设计糟糕）

屏幕上有三个主要组件，带有两个箭头的图标按钮：DropDownMenu 和 GridView。

IconButton 重新查询来自 android 的所有路径。在上述列表中。下拉菜单在 onChanged 上有一个函数，它创建 gridView 使用的列表中的所有卡片。

这是功能：

void _onChanged(String value) {
    setState(() {
      _currFolder = value;
      _photoCards = calculatePhotoCards();

    });
  }

计算照片卡是这样的：

List<Widget> calculatePhotoCards() {
    List<Widget> list = new List();

    for (int v = 0; v < _foldersAndPaths.length; v++) {

      if (_foldersAndPaths[v][0] == _currFolder) {


        list.add(Card(
            color: Colors.white,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(20.0))),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: new ClipRRect(
                borderRadius: new BorderRadius.circular(8.0),
                child: Image.file(
                  File(_foldersAndPaths[v][1]),
                  fit: BoxFit.cover,


              ),
            ),
          ),
        ));
      }
    }

    print(list);
    return list;
  }

其中 _foldersAndPaths 是包含其各自文件夹（如上所述）的所有路径的列表，而 _currFolder 是 DropDownMenu 中选定的文件夹。

Answer 1

您需要添加cacheWidth和cacheHeight

例子：

Image.network(
  shop.shopPic,
  width: 46,
  height: 46,
  cacheWidth: 46,
  cacheHeight: 46,
)

Answer 2

我决定实现这个，看看它是否与图像大小调整等有关，因为过去对于远程图像存在一些问题。

当我实现它时，我遇到了和你完全相同的问题。我认为 flutter 确实缓存了缩放到合理大小的图像，但事实似乎并非如此。它实际上是将每个图像加载到内存中，这就是您崩溃的原因。不需要那么多图像就会耗尽内存，因为当它们被解码为像素时，它们已经非常巨大了。

这里和这里是关于这个（我自己提出的）针对颤振的错误。

不幸的是，我认为目前没有一种纯粹的颤振方式可以做到这一点。pub 上有一个图像包可以缩小图像，但它是直接在 dart 代码中完成的，所以性能不高。

在这些错误得到修复之前，您可能必须寻找特定于 Android（如果您对此感兴趣，则特定于 iOS）的解决方案。这需要使用 android 缩略图创建器来创建位图，然后保存该位图并将其 URL 传递回 flutter，或者直接传递位图的字节。

抱歉，我没有比这更好的答案了！