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

Question

所以我正在做一个项目，我希望有一个包含多个数据流的 ListView 。我正在寻找的是这样的东西，但它都需要在一个 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) 或将空的 List 放置在 ListView 的子级中，并使用 StreamBuilder 以外的东西从 firebase 添加到列表，因为它需要返回的 Widget。 (事情是我不知道除了 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 天并且没有任何 friend /同事可以问了解 dart/flutter。

Answer 1

你检查过了吗Provider package ？您可以使用 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, _) {
          
      },
    ),
  );
}