firebase - Firestore映射到StreamBuilder => ListView.Builder

Question

我想显示文档中的歌曲列表(用户单击的歌手)。每首歌曲应加载到列表图块中，但所有歌曲均加载到一个图块中。
并从所有文档(所有歌手)中加载“歌曲列表”。
这是FireStore数据库

这是歌手列表。

这样一来，在磁贴中仅应显示每个所选歌手的歌曲，而应显示所有歌手的所有歌曲。每位歌手的歌都合而为一

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 (snapshot.data == null)
            return Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.red,
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.teal),
              ),
            );
          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: 20, color: Colors.red[500]),
                                ),
                            ]),
                      ),
                    ),
                  );
                }),
          );
        },
      ),
    );
  }
}

Answer 1

如果只想获取一位歌手的歌曲，则需要指定文档ID来检索一个文档，请对此进行更改:

 stream: Firestore.instance.collection('singers').snapshots(),

到这个:

stream: Firestore.instance.collection('singers').document('aryana sayeed').snapshots(),