第二百二十回如何把异步的CallBack转换成事件流

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/135142590

本文介绍了如何在Flutter中将异步的Callback转换为事件流，通过抽象类模拟回调，使用Stream和StreamBuilder实现实时更新，适用于响应式UI编程，尤其在处理蓝牙回调时提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何修改StatusBar中文字的颜色"相关的内容，本章回中将介绍 如何把异步的CallBack转换成事件流.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中提到的Callback表示回调函数，我们将模拟创建回调函数，并且把回调函数转换事件流(Stream).因为我在使用蓝牙包时发现了很多的回调函数，它与响应式UI配合使用的效果不太好，所以我准备把回调函数转换成事件流，这样可以方便我们使用回调函数。

2. 思路与方法

2.1 实现思路

我们先介绍一下实现的思路。回调函数通过抽象类或者within语法实现。事件流通过Stream实现。在响应回调函数时向Stream中添加事件，进而形成事件流，在页面中只需要使用StreamBuidler组件就可以监听事件流。

2.2 实现方法

介绍完实现思路的后，我们详细介绍实现方法，下面是具体的实现步骤，请大家参考：

创建一个抽象类，并且在类中创建空的方法用来实现回调函数；
创建一个页面，在页面中创建StreamController对象；
在页面类中实现抽象类中的方法，主要是使用StreamController对象向Stream中添加事件；
在页面中使用StreamBuilder组件监听Steam中的事件；

3. 示例代码

//接口类，用来模拟回调方法
mixin CallBack {
  String _data = "default";

  ///用来模拟其它模块调用回调方法
  void changeData(String data) {
    _data = data;
    onDataChanged(_data);
  }

  void onDataChanged(String data) {}
}


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

  @override
  State<ExCircleAvatar> createState() => _ExCircleAvatarState();
}

///页面类实现抽象类中的方法
class _ExCircleAvatarState extends State<ExCircleAvatar> with CallBack {
  final StreamController<String> _dataStreamController = StreamController();

  @override
  void onDataChanged(String data) {

    super.onDataChanged(data);
    ///在监听到的回调中给stream添加事件,streamBuilder收到后会更新数据
    _dataStreamController.sink.add(data);
    ///按钮中通过changeData()方法模拟其它模块执行回调，这里相当于当前模拟监听到的回调中数据后
    debugPrint("Callback: $data");
  }

  @override
  void dispose() {
    _dataStreamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _dataStreamController.sink.add("default data");

    return Scaffold(
        appBar: AppBar(
          title: const Text("Example of Circle Avatar and LiveData",style: TextStyle(fontSize: 18),),
        ),
        body: Column(
          children: [
            TextButton(
              onPressed: () {
                changeData("data1");
              },
              child: const Text("Change data by CB"),
            ),
            ///使用Stream监听回调方法中的数据变化，点击上面的按钮相当于回调方法修改数据
            StreamBuilder(
              stream: _dataStreamController.stream,
              builder: (context, shotData) {
                return Text("data is: ${shotData.data}");
              },
            ),
          ],
        ));
  }