【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),
                ))
          ],
        ),
      ),
    );
  }
}
相关推荐
renke33643 小时前
Flutter for OpenHarmony:色彩捕手——基于HSL色轮与感知色差的交互式色觉训练系统
flutter
子春一5 小时前
Flutter for OpenHarmony:构建一个 Flutter 四色猜谜游戏,深入解析密码逻辑、反馈算法与经典益智游戏重构
算法·flutter·游戏
铅笔侠_小龙虾6 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
微祎_7 小时前
Flutter for OpenHarmony:构建一个 Flutter 重力弹球游戏,2D 物理引擎、手势交互与关卡设计的工程实现
flutter·游戏·交互
一起养小猫8 小时前
Flutter for OpenHarmony 实战_魔方应用UI设计与交互优化
flutter·ui·交互·harmonyos
hudawei9968 小时前
flutter和Android动画的对比
android·flutter·动画
一只大侠的侠8 小时前
Flutter开源鸿蒙跨平台训练营 Day7Flutter+ArkTS双方案实现轮播图+搜索框+导航组件
flutter·开源·harmonyos
一只大侠的侠9 小时前
Flutter开源鸿蒙跨平台训练营 Day9分类数据的获取与渲染实现
flutter·开源·harmonyos
一只大侠的侠9 小时前
Flutter开源鸿蒙跨平台训练营 Day 5Flutter开发鸿蒙电商应用
flutter·开源·harmonyos
ZH154558913110 小时前
Flutter for OpenHarmony Python学习助手实战:GUI桌面应用开发的实现
python·学习·flutter