最快的方式在Flutter中显示100个或更多图像

Question

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

我认为问题是我在5年前的设备上加载了大量4K图像（超过100个）。屏幕上实际显示的图像实际上是15左右，但我需要像画廊一样，所以GridView中的所有图像。

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

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

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

这是我得到的用户界面:(抱歉可怕的设计）

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

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

这是功能：

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

    });
  }

而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是包含其各自文件夹（如上所述）的所有路径的List，而_currFolder是DropDownMenu中的Selected文件夹。

Answer 1

我决定实现它，看它是否与图像大小等有关，因为过去有一些关于远程图像的问题。

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

Here和here是关于这个的错误（我自己提出了一个）反对颤动。

所以不幸的是，我认为目前没有一种纯粹的颤抖方式。在pub上有一个图像包可以缩小图像，但它直接在dart代码中执行，因此并不是所有的性能。

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

对不起，我没有比这更好的答案！