Question

我有此功能，可以获取要显示的图像的网址

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

然后我要在Builder中使用它：

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来处理状态管理为你。

这就是使用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(...);
        },
      ));
}

如何使用Future从FirebaseStorage获取映像？

1 个答案: