firebase - 从 firestore 地图到 StreamBuilder => ListView.Builder

Question

我想在特定文档中显示歌曲列表，并且只显示 KEY(name) 而不是值。每首歌曲都应加载到列表中，但所有歌曲都加载到一个小部件中。它从firestore中的每个文档（歌手）加载“歌曲列表”并显示KEY和Value。

class SongsList extends StatefulWidget {
  @override
  _SongsListState createState() => _SongsListState();
}

class _SongsListState extends State<SongsList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: Firestore.instance.collection('singers').snapshots(),
        builder: (
          context,
          snapshot,
        ) {
          //**if statement**
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/back.png'), fit: BoxFit.contain)),
            child: ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) => SingleChildScrollView(
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 10, right: 10, top: 10, bottom: 0),
                        child: Container(
                          height: 50,
                          width: 300,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.white.withOpacity(0.5),
                                  spreadRadius: 1.5,
                                  blurRadius: 1.5,
                                  //offset: Offset(0, 1), // changes position of shadow
                                ),
                              ],
                              borderRadius: BorderRadius.circular(5),
                              border: Border.all(
                                  color: Colors.red[200],
                                  width: 0.5,
                                  style: BorderStyle.solid)),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  snapshot.data.documents[index]['songs list']
                                      .toString(),
                                  style: TextStyle(
                                      fontSize: 10, color: Colors.red[500]),
                                ),
                              ]),
                        ),
                      ),
                    )),
          );
        },
      ),
    );
  }
}

标签： firebaseflutterdartgoogle-cloud-firestore

Answer 1

您可以执行以下操作：

snapshot.data.documents[index]['songs list']

这应该返回 a map，因此将其分配给一个变量：

var result = snapshot.data.documents[index]['songs list'];

然后迭代并将 分配key给Text小部件：

children: <Widget>[
        for(var res in result.entries) 
          Text(
            res.key,
              style: TextStyle(
                  fontSize: 10, color: Colors.red[500]),
             ),
         ]

---

完整代码：

class SongsList extends StatefulWidget {
  @override
  _SongsListState createState() => _SongsListState();
}

class _SongsListState extends State<SongsList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: Firestore.instance.collection('singers').snapshots(),
        builder: (
          context,
          snapshot,
        ) {
          //**if statement**
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/back.png'), fit: BoxFit.contain)),
            child: ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) {
                  var result = snapshot.data.documents[index]['songs list'];
                  return SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10, right: 10, top: 10, bottom: 0),
                      child: Container(
                        height: 50,
                        width: 300,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.white.withOpacity(0.5),
                                spreadRadius: 1.5,
                                blurRadius: 1.5,
                                //offset: Offset(0, 1), // changes position of shadow
                              ),
                            ],
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(
                                color: Colors.red[200],
                                width: 0.5,
                                style: BorderStyle.solid)),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              for (var res in result.entries)
                                Text(
                                  res.key,
                                  style: TextStyle(
                                      fontSize: 10, color: Colors.red[500]),
                                ),
                            ]),
                      ),
                    ),
                  );
                }),
          );
        },
      ),
    );
  }
}

还要确保将pubspec.yaml文件中的 dart 版本更改为以下内容：

environment:
  sdk: ">=2.7.0 <3.0.0"

然后执行：

 flutter pub get
 flutter clean

并重新启动 vscode 或 android studio。