Flutter通信插件wire_flutter的使用

WireDataBuilder Widget - wire_flutter

WireDataBuilder 是 wire_flutter 工具包中的一个数据容器层。

如何使用

该组件订阅数据变化，并在变化发生时重新构建小部件。当调用 Wire.data('param', value) 更新数据时，WireDataBuilder 小部件会重建。

示例代码

WireDataBuilder<int>(
  dataKey: CounterDataKey.COUNT,
  builder: (context, value) => Text(
    '$value',
    style: Theme.of(context).textTheme.headline4,
  )
)

你可以从用户界面发送消息或信号，这些消息或信号可以在应用程序的任何其他地方被监听，完全与用户界面解耦：

FloatingActionButton(
  onPressed: () => Wire.send(CounterSignal.INCREASE),
  child: Icon(Icons.add),
)

可以通过信号来响应并更新数据（甚至传递函数作为数据值）。新的值或函数调用的结果将传播到 WireData 监听器，并在 WireDataBuilder 中重建小部件以使用新的值。

Wire.add(this, CounterSignal.INCREASE, (payload, wireId) {
  Wire.data(CounterParams.COUNT, (value) {
    return (value ?? 0) + 1;
  });
});

TodoMVC 示例

示例展示

示例代码

创建列表，参数为 TodoDataKeys.LIST，这是一个存储在 Wire.data 中的 TodoVO 对象的 ID 列表。

WireDataBuilder<List<String>>(
  dataKey: TodoDataKeys.LIST,
  builder: (context, list) => ListView.builder(
    key: ArchSampleKeys.todoList,
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
      final todoId = list[index];
    ...

TodoItem 消费此 ID（字符串），并检索/订阅 WireData 以便在发生变化时进行更新——这是如何将 TodoVO 的更改反映到用户界面的方式。

Widget build(BuildContext context) {
  return WireDataBuilder<TodoVO>(
    dataKey: id,
    builder: (context, todoVO) => Visibility(
      visible: todoVO.visible, // 渲染来自 TodoVO 的值
      child: ListTile(
        onTap: onTap,
        leading: Checkbox(
          key: ArchSampleKeys.todoItemCheckbox(todoVO.id),
          value: todoVO.completed, // 渲染来自 TodoVO 的值
          onChanged: onToggle,
        ),
    ...

任何更改都被“转换”为信号并发送给其监听器：

FilterButton(
  isActive: activeTab == AppTab.todos,
  activeFilter: TodoFilterValue.ALL,
  onSelected: (filter) => Wire.send(TodoViewSignal.FILTER, filter),
)

视图不知道谁将在哪里处理这些信号，它只关心在变化时渲染数据。

Wire.add(this, TodoViewSignal.INPUT,  _signalProcessor);
Wire.add(this, TodoViewSignal.EDIT,   _signalProcessor);
Wire.add(this, TodoViewSignal.DELETE, _signalProcessor);
Wire.add(this, TodoViewSignal.TOGGLE, _signalProcessor);
Wire.add(this, TodoViewSignal.FILTER, _signalProcessor);
Wire.add(this, TodoViewSignal.CLEAR_COMPLETED, _signalProcessor);
Wire.add(this, TodoViewSignal.COMPLETE_ALL, _signalProcessor);

信号可以在任何地方处理，甚至在不相关的多个地方——在这个例子中，它是一个控制器——TodoController。

你可能会认为 TodoController 是 Redux 中的 reducer，它监听“事件”-信号并设置数据。在这个例子中，控制器是应用程序的大脑，它具有业务决策逻辑，并知道如何处理数据并将它们发送到何处进行进一步存储——TodoModel。因此，它可以自行存储数据，但我们更倾向于解耦职责，让控制器仅仅将数据委托给模型，模型知道如何以及在哪里存储数据并在更新前将其写入 Wire.data。

void _signalProcessor(payload, wireId) {
  final wire = Wire.get(wireId: wireId).single;
  print('> TodoProcessor -> ${wire.signal}: data = ' + data.toString());
  switch (wire.signal) {
    case TodoViewSignal.INPUT:
      var createDTO = payload as CreateDTO;
      var text = createDTO.text;
      var note = createDTO.note;
      var completed = createDTO.completed;
      if (text != null && text.isNotEmpty) {
        todoModel.create(text, note, completed);
        Wire.send(TodoViewSignal.CLEAR_INPUT); // 控制器向系统的其他部分发送信号
      }
      break;
    case TodoViewSignal.EDIT:
      var editTodoDTO = payload as EditDTO;
      var todoText = editTodoDTO.text;
      var todoNote = editTodoDTO.note;
      var todoId = editTodoDTO.id;
      if (todoText.isEmpty) {
        todoModel.remove(todoId);
      } else {
        todoModel.update(todoId, todoText, todoNote);
      }
      break;
 ...

视图也可以订阅 Wire 信号 (Wire.add) 并在来自系统其他部分（控制器/模型或其他视图）的信号时更新自身，而无需知道是谁请求的。

示例见 Wire 存储库中的 TodoMVC 示例：

class TodoInputView extends DomElement {
  TodoInputView(InputElement dom):super(dom) {
    Wire.add(this, TodoViewSignal.CLEAR_INPUT, (s, d) => dom.value = '');
    dom
      ..text = ''
      ..onKeyPress.listen((e) =>
        e.keyCode == KeyCode.ENTER &&
          Wire.send(TodoViewSignal.INPUT, CreateDTO(dom.value, '')));
  }
}