firebase - 使用 Firebase 将 Gridview 按钮功能移至新屏幕

问题描述

我使用 Firebase 和 Streambuilder 以及 Gridview.builder 制作了一个 Gridview。此网格显示专辑标题、每张专辑的专辑封面以及制作每张专辑的艺术家。我希望每个网格图块都能够被按下并导航到具有其特定专辑详细信息的单独页面。该计划已发布，该应用程序将能够识别网格图块所指的整个文档，移动到新页面，并完整显示文档以揭示专辑详细信息。问题是，我不知道该怎么做。由于snapshot.data.documents[index]['Title']在迭代所有文档以创建网格视图时工作，我认为键入snapshot.data.documents[index]会起作用，但它只显示Instance of 'DocumentSnapshot'在调试控制台中。我对如何解决这个问题没有想法，所以欢迎提出任何建议

我的代码如下所示

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final Services services = Services();
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgcolour,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: Icon(Icons.menu),
        title: Text("Home"),
        actions: <Widget>[
          Padding(padding: EdgeInsets.all(10), child: Icon(Icons.more_vert))
        ],
      ),
      body: StreamBuilder(
          stream: Firestore.instance.collection('music').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text("Loading...");
            return GridView.builder(
              itemCount: snapshot.data.documents.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, childAspectRatio: 0.655172413),
              //cacheExtent: 1000.0,
              itemBuilder: (BuildContext context, int index) {
                var url = snapshot.data.documents[index]['Cover Art'];

                return GestureDetector(
                  child: Container(
                    width: 190.0,
                    child: Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32)),
                      color: hexToColor(
                          snapshot.data.documents[index]['Palette'][0]),
                      elevation: 1,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          SizedBox(height: 12),
                          ClipRRect(
                              borderRadius: BorderRadius.circular(21.0),
                              child: Image.network(url,
                                  height: 180.0, width: 180)),
                          SizedBox(height: 10),
                          Text(
                              snapshot.data.documents[index]['Artist']
                                  .join(', '),
                              textAlign: TextAlign.center,
                              style: GoogleFonts.montserrat(
                                  textStyle: TextStyle(color: Colors.white),
                                  fontSize: 14,
                                  fontWeight: FontWeight.w300)),
                          SizedBox(height: 10),
                          Text(snapshot.data.documents[index]['Title'],
                              style: GoogleFonts.montserrat(
                                  textStyle: TextStyle(color: Colors.white),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600),
                              textAlign: TextAlign.center),
                        ],
                      ),
                    ),
                  ),
                  onTap: () {
                    print("Tapped ${snapshot.data.documents[index]}");
                  },
                );
              },
            );
          }
          ),
    );
  }
}

标签： firebaseflutterdart

firebase - 使用 Firebase 将 Gridview 按钮功能移至新屏幕

问题描述

解决方案

推荐阅读