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

Question

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

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

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

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

我将它们全部放在这样的列表中： [[“相机”、“存储/仿真/0/downloads/1.png”]等]

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

屏幕上有三个主要组件，带有两个箭头的图标按钮： 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 是包含其各自文件夹的所有路径的列表（如上所述），而 _currFolder 是 DropDownMenu 中的选定文件夹。

Answer 1

你需要添加cacheWidth和cacheHeight

示例：

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

Answer 2

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

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

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

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

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

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

Answer 3

我正在使用 CachedNetworkImage，我在加载多个图像时遇到了问题，并且应用程序的内存超过了 3GB，因此解决方案是

CachedNetworkImage(
    height: height,
    width: width,
    memCacheHeight: height, //add this line
    memCacheWidth: width, //add this line
    imageUrl: imageUrl,
  ),

它将内存使用量从 3GB 减少到 60MB