时间戳

首页 > 解决方案 > firestore 映射到 StreamBuilder => ListView.Builder

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

问题描述

我想在文档中显示歌曲列表（用户点击的歌手）。每首歌曲都应加载到列表图块中，但所有歌曲都加载到一个图块中。它从所有文件（所有歌手）中加载“歌曲列表”。

这是 FireStore 数据库 D B ，这是可供选择的歌手列表。 歌手名单 这应该只显示所选歌手的歌曲，每首歌曲都显示在磁贴中，但显示所有歌手的所有歌曲。每个歌手都在一块瓷砖上唱歌 歌曲列表

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

标签： firebaseflutterdartgoogle-cloud-firestore

解决方案

如果您只想获取一位歌手的歌曲，那么您需要指定文档 id 以检索一个文档，更改此：

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

进入这个：

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

推荐阅读