Flutter Firebase 合并不同的流列表问题

Question

我有一个这样的流的组合列表；

var Stream1 = _firestore
      .collectionGroup("Infos")
      .where('ID', whereIn: List1)
      .snapshots();
  var Stream2 = _firestore
      .collectionGroup("Infos")
      .where('ID', whereIn: List2)
      .snapshots();
  var Stream3 = _firestore
      .collectionGroup("Infos")
      .where('ID', whereIn: List3)
      .snapshots();
  
  List<Stream<QuerySnapshot>> combineList = [Stream1, Stream2, Stream3];

通过这种方法，我合并来自combineList 的流；

var totalStreams = StreamGroup.merge(combineList);

当我在 StreamBuilder 中使用 totalStreams 时，通常情况下，3 个合并流的所有结果都应该显示在 StreamBuilder 中，但我只在 StreamBuilder 中显示最后一个流（Streams3）的数据。

Answer 1

使用这个包https://pub.dev/packages/async，如下所示。

import 'package:async/async.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class InfosWidget extends StatefulWidget {
  const InfosWidget({Key? key}) : super(key: key);

  @override
  State<InfosWidget> createState() => _InfosWidgetState();
}

class _InfosWidgetState extends State<InfosWidget> {
  late Stream<List<List<Infos>>> _myStreamInfos;

  @override
  void initState() {
    super.initState();

    _myStreamInfos = StreamZip(
      [
        FirebaseFirestore.instance
            .collectionGroup("Infos")
            .where("id", whereIn: ["id1", "id2"])
            .snapshots()
            .map((query) =>
                query.docs.map((map) => Infos.fromMap(map.data())).toList()),
        FirebaseFirestore.instance
            .collectionGroup("Infos")
            .where("id", whereIn: ["id1", "id2"])
            .snapshots()
            .map((query) =>
                query.docs.map((map) => Infos.fromMap(map.data())).toList()),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<List<Infos>>>(
        stream: _myStreamInfos,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const SizedBox();
          }
          final listInfos = <Infos>[];
          for (final info in snapshot.data!) {
            listInfos.addAll(info);
          }

          return Container();
        });
  }
}

@immutable
class Infos {
  final String id;
  final String something;

  const Infos({required this.id, required this.something});

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'something': something,
    };
  }

  factory Infos.fromMap(Map<String, dynamic> map) {
    return Infos(
      id: map['id'] as String,
      something: map['something'] as String,
    );
  }
}

Answer 2

要合并流，我可以建议你使用 rxdart 的CombineLatestStream。 每次其中一个流发出一个新事件时，StreamBuilder 都会构建。 返回的 snapshot.data 是每个流的最新元素的列表。

当任何一个源流序列发出一个项目时，combiner 函数将指定的 Streams 合并为一个 Stream 序列。

在所有 Streams 至少发出一项之前，Stream 不会发出。 如果提供的流之一为空，则生成的序列将在不发出任何项目或使用组合器的情况下完成 功能。

这里是代码示例：

StreamBuilder( 
stream: CombineLatestStream.list([ 
  stream0, 
  stream1, 
]), 
builder: (context, snapshot) { 
  final data0 = snapshot.data[0]; 
  final data1 = snapshot.data[1]; 
})

另一个可能帮助您合并流的构造函数是：Merge.

指定流的元素被展平为单个流序列。 如果一个或多个指定的流为空，则生成的序列完成而不发射任何项目。

示例代码：

static Stream<T> merge<T>(Iterable<Stream<T>> streams) =>
    MergeStream<T>(streams);

这是一个link，它显示了每个构造函数的工作原理图。