Flutter后台任务管理插件jObservable的使用

jObservable简介

jObservable 是一个受SwiftUI启发的轻量级且高效的Flutter包，用于处理基于可观察值的状态更新并触发UI重绘。此框架使用观察者模式，允许小部件观察单个状态变量（信号），并在所观察的状态发生变化时仅重绘受影响的小部件。

特性

• 可观察值：创建可独立观察的状态变量 (ObservableValue)。
• 高效UI重绘：小部件仅观察特定值，因此只有依赖这些值的小部件在更改时会重绘，减少了不必要的UI更新。
• 异步处理：自动批量处理短时间内多次的 setState 调用，避免冗余重绘。
• 简单API：无需复杂配置即可轻松管理和观察状态更新。

安装

在您的 pubspec.yaml 文件中添加 jObservable：

dependencies:
  jobservable: ^0.0.1

然后运行以下命令以获取依赖项：

flutter pub get

快速开始

要开始使用 jObservable，首先导入该包：

import 'package:jobservable/observable.dart';

创建一个可观察的状态变量

定义一个包含多个可观察信号的 SignalManager：

class SignalManager {
  final ObservableValue<double> signalA = ObservableValue(0.0); // 初始化为0.0
  final ObservableValue<double> signalB = ObservableValue(0.0);
  final ObservableValue<double> signalC = ObservableValue(0.0);

  // 可以添加更多信号
}

final SignalManager globalSignalManager = SignalManager();

每个 ObservableValue 实例存储一个单一值，并可以被任何小部件单独观察。

在小部件中观察可观察值

步骤：

1. 创建一个继承自 ObserverState 的小部件。
2. 在 ObserverState 中使用 observe 方法注册对特定 ObservableValue 的兴趣。
3. 当 ObservableValue 发生变化时，小部件会自动重建。

示例代码：

import 'package:flutter/material.dart';
import 'package:jobservable/observable.dart';

// 自定义小部件
class SignalWidget extends StatefulWidget {
  [@override](/user/override)
  _SignalWidgetState createState() => _SignalWidgetState();
}

class _SignalWidgetState extends ObserverState<SignalWidget> {
  late final ObservableWrapper signalWrapper;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 注册对 signalA 的观察
    signalWrapper = observe(globalSignalManager.signalA);
  }

  // 增加信号值的方法
  void incrementSignal() {
    globalSignalManager.signalA.value += 1.0; // 更新信号值，触发重绘
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Signal A: ${globalSignalManager.signalA.value}'), // 显示信号值
        ElevatedButton(
          onPressed: incrementSignal, // 点击按钮增加信号值
          child: Text('Increment Signal A'),
        ),
      ],
    );
  }
}

示例说明：

• SignalWidget 观察了 globalSignalManager.signalA。
• 当 signalA 改变时，SignalWidget 会自动重新构建并显示最新的值。

使用总结

1. 定义可观察值：为每个需要独立观察的状态变量使用 ObservableValue。
2. 在小部件中观察：继承 ObserverState 并使用 observe 方法来开始观察特定的 ObservableValue。
3. 自动重绘：观察到的小部件会在 ObservableValue 改变时自动更新。

API 参考

以下是 jObservable 的主要类及其功能：

• ObservableObject：支持添加和通知观察者的基类。
• ObservableValue：包装单一值并通知观察者其变化。
• ObservableWrapper：连接 ObservableObject 和小部件的 ObserverState，以便进行更新。
• ObserverState：管理观察者并自动释放它们的 State 子类。

示例代码完整Demo

以下是一个完整的示例代码，展示如何使用 jObservable 来管理后台任务和UI更新：

import 'package:flutter/material.dart';
import 'package:jobservable/observable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignalManagerPage(),
    );
  }
}

class SignalManagerPage extends StatelessWidget {
  final SignalManager signalManager = SignalManager();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('jObservable Demo')),
      body: Center(
        child: SignalWidget(signalManager: signalManager),
      ),
    );
  }
}

class SignalManager {
  final ObservableValue<double> signalA = ObservableValue(0.0);
  final ObservableValue<double> signalB = ObservableValue(0.0);
}

class SignalWidget extends StatefulWidget {
  final SignalManager signalManager;

  SignalWidget({required this.signalManager});

  [@override](/user/override)
  _SignalWidgetState createState() => _SignalWidgetState();
}

class _SignalWidgetState extends ObserverState<SignalWidget> {
  late final ObservableWrapper signalWrapperA;
  late final ObservableWrapper signalWrapperB;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 观察 signalA 和 signalB
    signalWrapperA = observe(widget.signalManager.signalA);
    signalWrapperB = observe(widget.signalManager.signalB);
  }

  void incrementSignalA() {
    widget.signalManager.signalA.value += 1.0;
  }

  void incrementSignalB() {
    widget.signalManager.signalB.value += 1.0;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              children: [
                Text('Signal A: ${widget.signalManager.signalA.value}'),
                ElevatedButton(
                  onPressed: incrementSignalA,
                  child: Text('Increment A'),
                ),
              ],
            ),
            Column(
              children: [
                Text('Signal B: ${widget.signalManager.signalB.value}'),
                ElevatedButton(
                  onPressed: incrementSignalB,
                  child: Text('Increment B'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}