所以我的消防站看起来像: 用户->用户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主屏幕,在该屏幕上它仅列出了查询中的所有项目,例如卡片(尽管我现在知道它仅列出图像,因为我们将要添加实际的卡片以后)