如何在一个ListView中使用多个StreamBuilder [英] 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.

我正在接收的数据流来自firebase，而变量myData是firebase集合的一个实例.我能够为单个流构建一个列表，所以我知道实例是正确的，我不想共享它，因为当前数据库规则处于测试模式.

The data stream I am receiving is from firebase and the variable myData is an instance of a firebase collection. 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.

此代码使我可以从单个流构建单个ListView并按预期工作.

This code allows me to build a single ListView from a single stream and works as expected.

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(),
        );
      }
    },
  ),
);

从这里开始，我有两种选择: 1)从StreamBuilder构建并返回一个Column，使我可以在一个ListView中包含多个流. 2)或将空的List放置在ListView的子级中，并使用StreamBuilder以外的其他方式将它们从firebase添加到列表中，因为它需要返回的Widget. (除了StreamBuilder，我不知道其他方法)任何想法都将受到欢迎.

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) 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. (Thing is I don't know another way apart from StreamBuilder) Any ideas would be welcome.

这是我第一个想法的代码.我希望您能看到它如何可扩展.通过返回列"，我可以构建一种流体ListView.问题在于它不会从Firebase获取数据，唯一的结果是CircularProgressIndicator.

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. The problem with this is that it will not get data from Firebase, the only result is a 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天，并且没有任何朋友/同事要求了解飞镖/飞镖.

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.

推荐答案

您是否已检查提供程序包 ?您可以使用MultiProvider通过StreamProvider包装多个Stream，并使用所有流更改.

Have you checked Provider package ? You can wrap multiple Stream's via StreamProvider with a MultiProvider and consume all the stream changes.

不知道细节，可能会想到这样的小部件:

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, _) {
          
      },
    ),
  );
}

这篇关于如何在一个ListView中使用多个StreamBuilder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！