如何使用未来从 FirebaseStorage 获取图像？

Question

我有这个 function ，它得到了我要显示的图像的 url

_getImage(photoUrl) async {
    final ref = FirebaseStorage.instance.ref().child(photoUrl);
    String url =  await ref.getDownloadURL();
    return url;
  }

然后我想在生成器中使用它：

body: !isLoading
            ? ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, i) {
             DetailListItem item = items[i];

              String imageUrl;
              _getImage(item.imageName).then((data) {
                setState(() {
                  imageUrl = data;
                  print('data herereeerererer $imageUrl');
                });
              });

child: Card(
                            color: CustomColors.newCreme,
                            margin: EdgeInsets.only(right: 7,
                                top: 0,
                                bottom: 7),
                            elevation: 7,
                            child: Center(
                              child: imageUrl == null ? Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Icon(FontAwesomeIcons.arrowLeft,
                                    color: CustomColors.newOrange,
                                    size: SizeConfig.blockSizeHorizontal * 10,),
                                  SizedBox(
                                    height: SizeConfig.blockSizeHorizontal *
                                        1.7,),
                                  Text('Sin Foto', style: TextStyle(
                                    color: CustomColors.newViolet,
                                    fontFamily: 'Montserrat',
                                    fontSize: SizeConfig.blockSizeHorizontal *
                                        5.0,
                                  )
                                  )
                                ],
                              ) : Image.network(imageUrl),

但似乎我遗漏了一些东西，因为尽管 imageUrl 已更新，但它只显示文本“Sin Foto”。 我究竟做错了什么？

Answer 1

这里的问题是您正在更新State ，这将重建您的所有body ，而不仅仅是ListView中的项目。 有一些方法可以通过提取小部件或使用StatefulBuilder来使用您的setState尝试来挽救这种情况，但惯用的方法是使用FutureBuilder来完成此任务，因为它会为您处理 state 管理。

所以这就是你可以使用FutureBuilder的方式：

(context, i) {
  DetailListItem item = items[i];

  return Card(
      color: CustomColors.newCreme,
      margin: const EdgeInsets.only(right: 7, top: 0, bottom: 7),
      elevation: 7,
      child: FutureBuilder(
        future: _getImage(item.imageName),
        builder: (context, AsyncSnapshot<String> snapshot) {
          if (snapshot.hasData)
            return Center(
              child: Image.network(snapshot.data),
            );

          // Return your "Sin Foto" text here.
          return Column(...);
        },
      ));
}