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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我正在接收的数据流来自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）构建并Column从StreamBuilder允许返回的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天，并且没有任何朋友/同事要求理解飞镖/颤振。

回答：

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

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

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 的全部内容， 来源链接： utcz.com/qa/419239.html

回到顶部