Question

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

我接收的数据流来自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(),
        );
      }
    },
  ),
);

从这里开始，我有两种选择： 1）从Column构建并返回StreamBuilder，使我可以在一个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天，并且没有任何朋友/同事要求了解飞镖/颤振器。

Answer 1

您检查了Provider package吗？您可以使用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

1 个答案: