Flutter数据同步插件wire的使用

Flutter数据同步插件Wire的使用

Wire概述

Wire是一个用于解耦用户界面（UI）与业务逻辑的库。它包含两个层次：通信层和数据容器层。

通信层

通信层由信号（字符串键）及其关联处理程序组成，并绑定到特定的作用域（Wire对象的实例）。该层主要方法包括 Wire.add 和 Wire.send。

数据容器层

数据容器层是一个内存中的键值映射，每个值都是一个 WireData 实例——一个观察者，持有动态值并可以订阅更新。其主要方法为 Wire.data。

Wire在Flutter中的使用

在Flutter中，Wire提供了一个特殊的Widget——WireDataBuilder<T>，使你可以轻松地从UI中消费数据并发送信号。

示例代码

步骤1：添加Wire和WireListener

在系统中添加Wire和WireListener。在这种情况下，控制器自身更新数据。

class CounterController {
  CounterController() {
    // 1. 作用域，字符串键，处理函数
    Wire.add(this, CounterSignalsKeys.INCREASE, (dynamic payload, wireId) async {
      // 4. 异步处理信号
      // 新值可以是函数或普通值
      Wire.data(CounterDataKeys.COUNT, value: (value) {
        final count = value as int?;
        // 6. 更新数据
        return (count ?? 0) + 1;
      });
    });
    // 处理CounterSignalsKeys.DECREASE的处理函数请参见源代码
  }
}

步骤2：视图订阅数据变化并知道如何更新自己

视图订阅数据变化并根据这些变化更新自身。

class CounterDisplay extends StatelessWidget {
  CounterDisplay() : super(key: ArchSampleKeys.statsCounter);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: WireDataBuilder<int>(
        dataKey: DataKeys.COUNT, // 数据键（字符串）
        builder: (context, notCompletedCount) {
          var allTodoCount = (Wire.data(DataKeys.LIST).value as List).length; // 访问数据
          var numCompleted = allTodoCount - notCompletedCount;
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('未完成任务数: $notCompletedCount'),
              Text('已完成任务数: $numCompleted'),
            ],
          );
        },
      ),
    );
  }
}

步骤3：将UI事件转换为信号

将UI事件转换为信号。

class CounterButton extends StatelessWidget {
  CounterButton(String title, String signal):super(key: ValueKey(title)) {
    return ElevatedButton(
      onPressed: () => Wire.send(signal),
      child: Text(title),
    );
  }
}

步骤4：中间件捕获系统中的所有操作

中间件捕获系统中的所有操作，例如存储计数器值到localStorage。

class CounterStorageMiddleware extends WireMiddleware {
  final ls = window.localStorage;

  int getInitialValue() {
    return ls.containsKey(CounterDataKeys.COUNT) ?
      int.parse(ls[CounterDataKeys.COUNT]) : 0;
  }

  @override
  void onData(String key, prevValue, nextValue) {
    print('> CounterMiddleware -> onData: key = ${key} | ${prevValue}-${nextValue}');
    if (key == CounterDataKeys.COUNT) {
      if (nextValue != null) ls[key] = nextValue.toString();
      else { if (ls.containsValue(key)) ls.remove(key); }
    }
  }

  @override void onAdd(Wire wire) { }
  @override void onRemove(String signal, [Object scope, listener]) { }
  @override void onSend(String signal, [data, scope]) { }
}

初始化

初始化Wire，设置初始值并注册中间件。

void main() {
  /// COUNTER EXAMPLE ======================================
  final counterStorageMiddleware = CounterStorageMiddleware();
  // 设置初始值从localStorage，可以在CounterStorageMiddleware构造函数中设置。
  Wire.data(CounterDataKeys.COUNT, value: counterStorageMiddleware.getInitialValue());
  // 在设置初始值后注册中间件以防止保存初始值
  Wire.middleware(counterStorageMiddleware);
  // 实例化控制器以注册所有信号处理
  CounterController();
  // 查找index.html中的根元素并将其映射到功能组件
  final root = document.querySelector('#root');
  ApplicationView(root as DivElement?);
}