Flutter - 如何从 Firestore 中检索 ID 列表并在 GridView 中显示它们的项目？

Posted 2023-02-23

【中文标题】Flutter - 如何从 Firestore 中检索 ID 列表并在 GridView 中显示它们的项目？

【英文标题】：Flutter - How to retrieve a list of IDs from Firestore and display their items in GridView?

【发布时间】：2019-08-21 23:11:13

【问题描述】：

我正在开发一个图书应用程序，我需要显示每个用户的收藏列表，我可以将所有收藏夹保存在 firestore 的数组中，但我不知道如何将它们检索到我的网格中。我使用 StreamBuilder 来检索所有书籍，但现在我不知道是否需要存储它们以显示以及如何显示。我尝试将所有收藏夹 id 检索到字符串列表中，然后将它们加载到我的 GridView 中，但列表为空。

这是我的 Firestore：

class _FavoriteScreenState extends State<FavoriteScreen> 

  UserModel model = UserModel();
  FirebaseUser firebaseUser;
  FirebaseAuth _auth = FirebaseAuth.instance;
  List<String> favorites;


  Future<List<String>> getFavorites() async

  firebaseUser = await _auth.currentUser();

  DocumentSnapshot querySnapshot = await Firestore.instance.collection("users")
      .document(firebaseUser.uid).get();
  if(querySnapshot.exists && querySnapshot.data.containsKey("favorites") &&
    querySnapshot.data["favorites"] is List)
    return List<String>.from(querySnapshot.data["favorites"]);

  
  return [];

  


  @override
  Widget build(BuildContext context) 


    Widget _buildGridItem(context, index)

      return Column(
        children: <Widget>[
          Material(
            elevation: 7.0,
            shadowColor: Colors.blueAccent.shade700,
            child: InkWell(
              onTap: ()
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => DetailScreen(document)
                ));
              ,
              child: Hero(
                tag: index['title'],
                child: Image.network(
                  index["cover"],
                  fit: BoxFit.fill,
                  height: 132,
                  width: 100,
                ),
              ),
            ),
          ),
          Container(
            width: 100,
            margin: EdgeInsets.only(top: 10, bottom: 5),
            child: Text(index["title"],
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              maxLines: 2,
              style: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w900,

              ),
            ),
          ),
        ],
      );
    

    return Scaffold(

      body: favorites != null ? Stack(
        children: <Widget>[
          GridView.builder(
            padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
            primary: false,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: MediaQuery.of(context).size.width /
                  (MediaQuery.of(context).size.height),
              //crossAxisSpacing: 3,
              //mainAxisSpacing: 3
            ),
            itemBuilder: (context, index)
              return _buildGridItem(context, favorites[index]);
            ,


          )

        ],
      )
      :
       Center(child: CircularProgressIndicator())
    );
  

  @override
  void initState() async 
    // TODO: implement initState
    super.initState();
    favorites = await getFavorites();
  

【参考方案1】：

我不得不更换我的 Firestore。

我创建了一个名为“books”的新集合，其中一个文档为“userID”，子集合包含书籍及其信息。

现在我可以轻松检索喜欢的书了。