[英]How to use multiple StreamBuilders in one ListView
So I am working on a project where I would like to have one List view that contains multiple streams of data.所以我正在做一个项目,我希望有一个包含多个数据流的列表视图。 What I am looking for is something like this, but it all needs to be scrollable in one list view.
我正在寻找的是这样的东西,但它都需要在一个列表视图中滚动。
The data stream I am receiving is from firebase and the variable myData
is an instance of a firebase collection.我收到的数据流来自 firebase,变量
myData
是 firebase 集合的一个实例。 I am able to build one list of a single stream so I know the instance is correct, I don't want to share it because the database rules are in a test mode at the moment.我能够构建单个流的一个列表,所以我知道实例是正确的,我不想共享它,因为数据库规则目前处于测试模式。
This code allows me to build a single ListView
from a single stream and works as expected.此代码允许我从单个流构建单个
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(),
);
}
},
),
);
From here I felt I had 2 options which would be: 1) to build and return a Column
from the StreamBuilder
allowing me to have multiple streams in one ListView
.从这里我觉得我有 2 个选项,它们是:1) 从
StreamBuilder
构建和返回一个Column
允许我在一个ListView
有多个流。 2) or to place a List
that was empty inside the children of ListView and add to the list from firebase using something other than StreamBuilder since it requires a returned Widget. 2) 或者在 ListView 的子项中放置一个空的
List
,并使用 StreamBuilder 以外的其他东西从 firebase 添加到列表中,因为它需要返回的小部件。 (Thing is I don't know another way apart from StreamBuilder) Any ideas would be welcome. (事实是我不知道除了 StreamBuilder 之外的另一种方式)任何想法都会受到欢迎。
Here is my code from the 1st idea.这是我第一个想法的代码。 I hope you can see how this would be scalable.
我希望你能看到这将如何扩展。 By returning Columns I can build one fluid
ListView
.通过返回 Columns 我可以构建一个流畅的
ListView
。 The problem with this is that it will not get data from Firebase, the only result is a CircularProgressIndicator
.这样做的问题是它不会从 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
],
)
Please help if you can, I have been working on resolving this for 2 or 3 days and don't have any friends/colleagues to ask that understand dart/flutter.如果可以,请提供帮助,我一直在努力解决这个问题 2 或 3 天,并且没有任何朋友/同事问了解 dart/flutter。
Have you checked Provider package ?您是否检查过Provider 包? You can wrap multiple
Stream
's via StreamProvider
with a MultiProvider
and consume all the stream changes.您可以使用
MultiProvider
通过StreamProvider
包装多个Stream
并使用所有流更改。
Not knowing the details, one could think of a widget like so:不知道细节,人们可以想到这样的小部件:
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.