如何使用 StreamBuilder 显示来自 firestore 文档的数据列表答案

【问题标题】：How to use StreamBuilder to show a list of data from firestore document如何使用 StreamBuilder 显示来自 firestore 文档的数据列表
【发布时间】：2019-05-08 12:51:40
【问题描述】：

我希望能够从 firestore 数据库中文档内的数组创建一个列表。

我的数据库是这样的：

我希望能够从 videosUrl 数组中的 url 创建一个 streamBuilder 网格。

我尝试了很多东西，但我想最好的方法是这样的：


StreamBuilder <List<DocumentSnapshot>>(
      stream: Firestore.instance
          .collection('events')
          .document('-LeH4rspnPTpeTLdt8hs')
          .collection('participants')
          .document('-LeL_TSfFDfqKgm-Io9T')
          .snapshots().asyncMap((snap) async {
        List<String> videosUrlArray = snap.data['videosUrl'];
        var videoUrlList = <DocumentSnapshot>[];
        for (var videoUrlPath in videosUrlArray) {
          videoUrlList.add(await Firestore.instance.document(videoUrlPath).get());
        }
        print(videoUrlList);
        return videoUrlList;

      }),
      builder: (BuildContext context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting: return _showLoading();
          default:
            return new GridView(
              reverse: false,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2),
              children: snapshot.data.map((DocumentSnapshot document) {
                return Text('${snapshot.data}');
              }).toList(),
            );
        }
      },
    )

但我仍然无法访问数据！

【问题讨论】：

没有显示列表会发生什么？您的构建器方法是否被调用？我发现调试时在构建器的第一行添加print(snapshot) 很有用。
在控制台中我没有收到任何错误，而是在模拟器上收到Error type List<dynamic> is not a subtype od type List<String>
听起来你需要在List<String> videosUrlArray = snap.data['videosUrl']这一行添加演员表
你有什么想法吗？我以某种方式尝试过，但我想我做错了什么

标签： arrays flutter stream builder

【解决方案1】：

我用下面的代码解决了这个问题：


Widget buildGridFilesToExport(){
  return new StreamBuilder(
    stream: Firestore.instance
        .collection('users')
        .document(dataUserGlobal.userAdminId)
        .collection('events')
        .document(dataUserGlobal.eventId)
        .snapshots(),
    builder: (context, snapshot) {
      print(snapshot);
      if (snapshot.hasError)
        return new Text('Error: ${snapshot.error}');
      switch (snapshot.connectionState) {
        case ConnectionState.waiting: return new Text('Loading...');
        default:
          List videosList = snapshot.data['thumbnailsUrl'];
          return
            videosList != null ?
            new GridView.count(
              crossAxisCount: 2,
              childAspectRatio: 1,
              children: List.generate(snapshot.data['thumbnailsUrl'].length, (index) {
                return Container(
                    padding: EdgeInsets.all(5.0),
                    child: Column(
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(bottom: 2.0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                            image: DecorationImage(
                              image: NetworkImage(snapshot.data['thumbnailsUrl'][index]),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),

                      ],
                    )
                );
              }),
            )
                :
            Center(
                child: Container(
                  width: 300,
                  child: Text(
                    'Ancora nessun video!\nVai nella cartella amici e accetta i loro video!',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: 'acumin-pro',
                      fontSize: 22,
                    ),
                  ),
                )
            );
      }
    },
  );
}

【讨论】：