【Flutter】合并多个流Stream

1.说明

无意间发现了一个好用的库rxdart,它为 Dart 的 Stream 添加了额外的功能。

2.功能

(1)合并多个流Stream

借助Rx.combineLatest2()合并两个流stream1和stream2

注意:如果dart文件中同时使用了getx,需要隐藏掉Rx,否则会冲突。

dart 复制代码
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
// import 'package:get/get.dart' hide Rx;

// Library: rxdart , v0.28.0
// 为 Dart 的 Stream 添加了额外的功能
// 合并多个流 CombineLatestStream

// Publisher: fluttercommunity.dev

class RxdartDemo extends StatefulWidget {
  const RxdartDemo({super.key});

  @override
  State<RxdartDemo> createState() => _RxdartDemoState();
}

class _RxdartDemoState extends State<RxdartDemo> {
  //(热重载报错) Unhandled Exception: Bad state: Stream has already been listened to.
  // 解决:更改为广播流(broadcast)。
  StreamController<String> streamController1 = StreamController<String>.broadcast();
  late Stream<String> stream1;

  StreamController<int> streamController2 = StreamController<int>.broadcast();
  late Stream<int> stream2;

  StreamController<List<int>> streamController3 = StreamController<List<int>>.broadcast();
  late Stream<List<int>> stream3;

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

    stream1 = streamController1.stream;
    streamController1.add("A");

    stream2 = streamController2.stream;
    streamController2.add(1);

    stream3 = streamController3.stream;
    streamController3.add([1, 2]);
  }

  @override
  void dispose() {
    streamController1.close();
    streamController2.close();
    streamController3.close();

    super.dispose();
  }

  // Rx.combineLatest2 将两个Stream流合并
  Stream<String> get streamCombined =>
      Rx.combineLatest2(stream1, stream2, (a, b) => '$a - $b');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "单个流Stream",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 12,
            ),
            StreamBuilder<List<int>>(
                stream: stream3,
                builder: (context, snapshot) {
                  return Text(
                    "${snapshot.data}",
                    style: const TextStyle(fontSize: 16),
                  );
                }),
            const SizedBox(
              height: 12,
            ),
            const Text(
              "合并多个流Stream",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 12,
            ),
            StreamBuilder<String>(
                stream: streamCombined,
                builder: (context, snapshot) {
                  return Text(
                    snapshot.data ?? 'empty',
                    style: const TextStyle(fontSize: 16),
                  );
                }),
            TextButton(
                onPressed: () {
                  streamController1.add("b");
                  streamController2.add(2);
                  streamController3.add([3, 4]);
                },
                child: const Text(
                  'Change',
                  style: TextStyle(fontSize: 16, color: Colors.blue),
                ))
          ],
        ),
      ),
    );
  }
}
相关推荐
孤鸿玉12 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥18 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart