在 flutter 中一次加载多张图片

Question

假设我有 5 张图像，我需要使用 Image.memory 来显示它。当我同时直接加载它们时，它总是说：

Invalid image

，而如果我只加载一张图像，那真的很好。有没有办法处理这个问题。这是代码

FutureBuilder(
                                future: imageAllLoad(message),
                                builder:
                                    (BuildContext context, AsyncSnapshot snap) {
                                  if (snap.connectionState ==
                                          ConnectionState.done &&
                                      snap.hasData) {
                                    return snap.data;
                                  } else if (snap.hasError)
                                    return Text("error");
                                  else
                                    return CircularProgressIndicator();
                                },
                              );

imageAllLoad(BaseMessage message) async {
    await downloadAndDecryptFile(message.secureUrl ?? "");

    return Image.memory(
            valDecryptedData.value!, // I will get this value after doing await downloadAndDecryptFile(message.secureUrl ?? "");
            // errorBuilder: (context, error, stackTrace) {
            //   print(error.toString());
            //   return Text('Error loading image $error');
            // },
          );
  }

所以我有listviewbuilder，在listviewbuilder内部我加载futurebuilder，其中

imageAllLoad

是一个用于解码图像的异步等待函数。有没有办法等到第一张图片加载成功后再加载下一张图片

Answer 1

将您的图像网址放在类似的列表中

final imageUrls = <String>[];

在你未来的建造者上使用像这样的未来

    Future.forEach(elements, (element) async{
    //get the image data first
    final bytes = await http.Client().readBytes(Uri.parse(imgUrl));

//after thats done update the state
                setState(() {
//assuming you have a global variable storing the data
                  this.imageBytes = bytes;
                });
    
//wait 5 seconds and continue with the next image
    Future.delayed(Duration(seconds: 5));

}）

最后改成

Image.memory(this.imageBytes);