小编典典

如何在一个ListView中使用多个StreamBuilder

flutter

所以我正在一个项目中,我想要一个包含多个数据流的列表视图。我正在寻找的是这样的东西,但是所有这些都需要在一个列表视图中滚动。

我正在接收的数据流来自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)构建并ColumnStreamBuilder允许返回的a中返回a
ListView。2)或将一个List空的列表放置在ListView的子级中,并使用StreamBuilder以外的其他内容从firebase添加到列表中,因为它需要返回的Widget。(除了StreamBuilder,我不知道其他方法)任何想法都将受到欢迎。

这是我的第一个想法的代码。我希望您能看到它如何扩展。通过返回色谱柱,我可以建立一种流体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天,并且没有任何朋友/同事要求理解飞镖/颤振。


阅读 576

收藏
2020-08-13

共1个答案

小编典典

您检查提供程序包了吗?你可以用多个Stream通过的StreamProviderMultiProvider和消费的所有数据流的变化。

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

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

      },
    ),
  );
}
2020-08-13