Flutter数据响应式编程插件observable_ish的使用

observable_ish简介

observable_ish 是一个用于编写优雅的跨平台客户端应用程序的轻量级非侵入式响应式框架，它使用Dart的异步 Stream 来发出和监听变化。该库提供了以下功能：

• Reactive Values：响应式的简单值封装。
• Reactive Lists：响应式的列表。
• Reactive Sets：响应式的集合。
• Reactive Maps：响应式的映射。
• Event emitter：事件发射器。

这些功能使得UI可以自动更新，并且可以通过事件发射器将事件传递给父组件。

Reactive values（响应式值）

获取和设置值

RxValue 可以用来封装一个简单的可观察值。它暴露了一个 value 字段来获取和设置当前值。

void main() {
  final rxInts = RxValue<int>(initial: 5);
  int got = rxInts.value; // 获取当前值
  print(got); // 输出: 5
  rxInts.value = 10;      // 设置当前值
  print(rxInts.value); // 输出: 10
}

当设置的值与现有值不同时，会通过多种方式通知变化。

监听变化

RxValue 提供了几种灵活的方式来监听变化：

• onChange：记录变化。
• values：新的值流。
• listen：带有新值的回调函数。

void main() {
  final rxInts = RxValue<int>(initial: 5);
  print(rxInts.value);  // 输出: 5
  rxInts.values.listen((int v) => print('New value: $v'));  // 输出: 5, 20, 25
  rxInts.value = 20;
  rxInts.value = 25;
}

绑定到一个值

RxValue 可以绑定到一个 Stream 或另一个 RxValue，当源 Stream 发出或 RxValue 改变时，它的值也会改变。

void main() {
  final textBox = RxValue<String>();
  final checkBox = RxValue<bool>(initial: false);
  
  textBox.bindStream(checkBox.map((bool v) => v ? 'Female' : 'Male'));
  checkBox.value = true;
  print(textBox.value); // 输出: Female
  checkBox.value = false;
  print(textBox.value); // 输出: Male
}

完整示例

import 'package:observable_ish/observable_ish.dart';

void main() async {
  final rxInts = RxValue<int>(initial: 5);
  print(rxInts.value); // 输出: 5
  rxInts.value = 10;
  rxInts.value = 15;
  rxInts.values.listen((int v) => print('value: $v')); // 输出: 15, 20, 25
  await Future.delayed(Duration(milliseconds: 50));
  rxInts.value = 20;
  rxInts.value = 25;
}

Composite reactive objects（复合响应式对象）

observable_ish 设计为非侵入式的，其理念是将模型和其响应式版本分离到不同的类中。

class RxUser {
  final name = RxValue<String>();
  final age = RxValue<int>();
}

class User {
  final rx = RxUser();

  User({String name, int age}) {
    this.name = name;
    this.age = age;
  }

  String get name => rx.name.value;
  set name(String value) => rx.name.value = value;

  int get age => rx.age.value;
  set age(int value) => rx.age.value = value;
}

void main() {
  final user = User(name: 'Messi', age: 30);
  user.age = 31;
  print(user.age);  // 输出: 31
  print('---------');
  user.age = 32;
  user.rx.age.listen((int v) => print(v));  // 输出: 32, 33, 34, 35
  user.age = 33;
  user.age = 34;
  user.age = 35;
}

Event emitter（事件发射器）

Emitter 提供了一个简单的接口来发出和监听事件，设计上与 RxValue 协同工作以提高生产力。

监听事件

Emitter 提供了多种方式来监听事件：

• on：在事件发生时执行回调。
• listen：类似于 Stream。
• asStream：将事件作为 Stream 获取。

管道事件

pipeTo 和 pipeToValue 方法可以将事件管道到另一个 Emitter 或 RxValue。

发出事件

emit、emitOne、emitAll、emitStream 和 emitRxValue 提供了多种方式来发出事件。

Reactive Lists（响应式列表）

RxList 在元素添加、移除、清空或设置时通知变化。

更新 RxList

RxList 实现了 Dart 的 List 接口，并提供了一些方便的方法来根据条件添加元素。

void main() {
  final rxInts = RxList<int>();
  rxInts.onChange.listen((c) => print(c.element)); // 输出: 5
  rxInts.addIf(5 < 10, 5);
  rxInts.addIf(5 > 9, 9);
}

监听变化

onChange 暴露了一个记录 List 变化的 Stream。

Reactive Sets（响应式集合）

RxSet 在元素添加或移除时通知变化。

更新 RxSet

RxSet 实现了 Dart 的 Set 接口，并提供了一些方便的方法来根据条件添加元素。

void main() {
  final rxInts = RxSet<int>();
  rxInts.onChange.listen((c) => print(c.element)); // 输出: 5
  rxInts.addIf(5 < 10, 5);
  rxInts.addIf(5 > 9, 9);
}

监听变化

onChange 暴露了一个记录 Set 变化的 Stream。

Reactive Maps（响应式映射）

RxMap 在元素添加、移除、清空或设置时通知变化。

更新 RxMap

RxMap 实现了 Dart 的 Map 接口，并提供了一些方便的方法来根据条件添加元素。

监听变化

onChange 暴露了一个记录 Map 变化的 Stream。

通过这些功能，observable_ish 插件可以帮助开发者更轻松地管理状态和事件，从而构建更加动态和响应式的Flutter应用。