Question

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

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

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

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

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

这是我得到的UI ：（很抱歉，糟糕的设计）

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

IconButton从android查询所有路径。在上述清单中。下拉菜单在onChanged上具有一个功能，可在gridView使用的列表中创建所有卡。

这是功能：

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

我决定实施此方法，以查看是否与图像大小调整等有关，因为过去对于远程图像存在一些疑问。

当我实现它时，我遇到了与您完全相同的问题。我以为抖动确实可以将图像缓存到适当大小的大小，但事实并非如此。它实际上是将每个图像加载到内存中，这就是为什么您崩溃的原因。不需要那么多的图像就可以用尽内存，而无需等到它们被解码为像素时就变得非常庞大。

Here和here是关于防止颤动的错误（我自己抚养过）。

因此，不幸的是，我认为目前还没有一种纯粹的抖动方法。 pub上有一个图像包，可以按比例缩小图像，但是它直接用dart代码完成，所以性能不尽相同。

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

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

Answer 2

您需要添加cacheWidth和cacheHeight

示例：

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

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

2 个答案: