![](/img/trans.png)
[英]ListView.Builder use under 2 StreamBuilders - flutter
[英]How to use multiple StreamBuilders in one ListView
所以我正在做一个项目,我希望有一个包含多个数据流的列表视图。 我正在寻找的是这样的东西,但它都需要在一个列表视图中滚动。
我收到的数据流来自 firebase,变量myData
是 firebase 集合的一个实例。 我能够构建单个流的一个列表,所以我知道实例是正确的,我不想共享它,因为数据库规则目前处于测试模式。
此代码允许我从单个流构建单个ListView
并按预期工作。
Container(
child: StreamBuilder<QuerySnapshot>(
stream: myData,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting: return new Text('Loading...');
default:
return new ListView(
children: snapshot.data.documents.map((DocumentSnapshot document) {
return Text(document['color']);
}).toList(),
);
}
},
),
);
从这里我觉得我有 2 个选项,它们是:1) 从StreamBuilder
构建和返回一个Column
允许我在一个ListView
有多个流。 2) 或者在 ListView 的子项中放置一个空的List
,并使用 StreamBuilder 以外的其他东西从 firebase 添加到列表中,因为它需要返回的小部件。 (事实是我不知道除了 StreamBuilder 之外的另一种方式)任何想法都会受到欢迎。
这是我第一个想法的代码。 我希望你能看到这将如何扩展。 通过返回 Columns 我可以构建一个流畅的ListView
。 这样做的问题是它不会从 Firebase 获取数据,唯一的结果是CircularProgressIndicator
。
ListView(
children: <Widget>[
StreamBuilder(
stream: myData,
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return Column(
children: List<Widget>.generate(3, (index) {
return Habit(
habit: snapshot.data.documents['index']['habit'],
icon: snapshot.data.documents['index']['icon'],
text: "figure this out later",
color: snapshot.data.documents['index']['color'],
complete: false, // figure this out later
);
}),
);
}
),
//Second Stream here
],
)
如果可以,请提供帮助,我一直在努力解决这个问题 2 或 3 天,并且没有任何朋友/同事问了解 dart/flutter。
您是否检查过Provider 包? 您可以使用MultiProvider
通过StreamProvider
包装多个Stream
并使用所有流更改。
不知道细节,人们可以想到这样的小部件:
Widget build(BuildContext context) {
return MultiProvider(
providers: [
StreamProvider.controller(builder: (_) => StreamController<CollectionA>()),
StreamProvider.controller(builder: (_) => StreamController<CollectionB>()),
],
child: Consumer2<CollectionA, CollectionB>(
builder: (context, CollectionA collectionA, CollectionB collectionB, _) {
},
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.