Question

所以我的消防站看起来像：用户->用户ID->项目-> itemId 我正在尝试查询数据库，然后从查询接收到的用户中检索所有项目。然后，我想从这些项目中构建一个流，并将其放入流构建器中。当前，查询只是在寻找名称。

我尝试使用futurebuilder，gridview，setState等。我遇到的主要问题是，我一直遇到多个流的问题，或者尝试遍历每个用户并遍历每个用户时遇到的问题。项，然后结束多个网格视图，因为我使用“ index”变量几乎充当嵌套的循环。

//this is my whole set up so far

class borrow_page extends StatefulWidget{
  final User user;
  ThemeColors theme;
  Database database = new Database();
  borrow_page({Key key, this.user, this.theme}) : super(key: key);

  borrowPage createState() => new borrowPage(user: user, theme: theme, database: database);
}

class borrowPage extends State<borrow_page>{
  final User user;
  ThemeColors theme;
  Database database;
  borrowPage({Key key, this.user, this.theme, this.database});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Borrow'),
        ),
      body: Container(
          child: new borrowPageStream(user: user,theme: theme, database: database,),
        )
    );
  }

}

class borrowPageStream extends StatelessWidget{
  final User user;
  ThemeColors theme;
  Database database;
  borrowPageStream({Key key, this.user, this.theme, this.database});
  @override
  Widget build(BuildContext context) {
    return new StreamBuilder(
      stream: Firestore.instance.collection('users').where('first_name', isEqualTo: 'Lucas').snapshots(),
      builder: (context, snapshot){
          QuerySnapshot qs = snapshot.data;
          var listed = qs.documents;
          return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
            childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4)),
            shrinkWrap: true,
            itemCount: listed.length,
            padding: EdgeInsets.all(2.0),
            itemBuilder: (context, index){
              return StreamBuilder(
                stream: listed[index].reference.collection('items').snapshots(),
                builder: (context, snapshot2){
                  if (!(snapshot2.hasData)){
                    return new Text('Loading items');
                  }
                  QuerySnapshot qs2 = snapshot2.data; //snapshot of item collection
                  var listed2 = qs2.documents;
                  return GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
                    childAspectRatio: 1),
                    itemCount: listed2.length,
                    padding: EdgeInsets.all(2.0),
                  itemBuilder: (context, index2){
                    return Container(
                      child: Image.network(listed2[index2]['url'],
                      fit: BoxFit.fill,
                      ),
                    );
                  });
                });
      });
      },
    );
  }

}

因此，预期的输出应该类似于letgo主屏幕，在该屏幕上它仅列出了查询中的所有项目，例如卡片（尽管我现在知道它仅列出图像，因为我们将要添加实际的卡片以后）

如何使用StreamBuilder从多个子集合构建流？

0 个答案: