首页 > 解决方案 > 如何使用 StreamBuilder 显示来自 firestore 文档的数据列表

问题描述

我希望能够从 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(),
            );
        }
      },
    )

但我仍然无法访问数据!

标签: arraysflutterstreambuilder

解决方案


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


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,
                    ),
                  ),
                )
            );
      }
    },
  );
}

推荐阅读