Flutter状态共享插件interstate的使用

特性

• 小部件可以将事件传递给树中的其他interstate小部件。
• 小部件可以从其下方的小部件中查询状态。
• 动态添加的小部件会自动连接到interstate。
• 构建动态表单时无需在数据模型中镜像结构。
• 表单中的小部件可以管理自己的状态及其子级，而无需定义结构的高级状态对象。

基本解释

这并不是一个更强大的状态管理解决方案的替代品，当构建具有复杂动态属性或复杂的验证场景的表单时，它通常很有用。

当一个新的InterstateWidget附加到树上时，它会注册到最近的祖先InterstateWidget。这是如何通过树传递事件的方式。

EventHandler定义了任何特定的InterstateWidget关心的事件类型。

在触发事件时，我们可以决定如何广播该事件。

事件总是发送到本地处理程序。

• 如果down标志设置为true，则事件将发送到树中所有在其下的interstate小部件。
• 如果up标志设置为true，则事件将向上发送直到到达根InterstateWidget。
• 如果span标志设置为true（且up标志也设置为true），则事件将向上发送到树中，然后沿遇到的任何分支向下发送。

开始使用

1. 添加依赖

在你的包的pubspec.yaml文件中添加以下内容：

dependencies:
  interstate: '^1.0.0'

2. 安装依赖

你可以从命令行安装包：

$ pub get

或者，你的编辑器可能支持pub。查看编辑器的文档以了解更多信息。

3. 导入包

在Dart代码中导入：

import 'package:interstate/interstate.dart';

使用示例

1. 定义一个状态对象

class NestedTextFieldState extends Equatable {
  final String text;
  final String error;

  const NestedTextFieldState({required this.text, this.error = ""});

  NestedTextFieldState copyWith({String? text, String? error}) => 
      NestedTextFieldState(text: text ?? this.text, error: error ?? this.error);

  @override
  List<Object?> get props => [text, error];
}

2. 定义一个interstate小部件

InterstateWidget<NestedTextFieldState>(
  id: uniqueId,
  widgetBuilder: (BuildContext context, NestedTextFieldState state, Widget? child, InterstateController<NestedTextFieldState> controller) {
    return TextFormField(
      initialValue: state.text,
      decoration: InputDecoration(
        errorText: state.error,
        border: const OutlineInputBorder()
      ),
      onChanged: (text) {
        // 发送一个字符串作为事件到本地控制器
        controller.send(text);
        // 然后我们发送一个验证事件到整个小部件树
        controller.send(EventValidate(), up: true, down: true);
      },
      onEditingComplete: () {
        // 我们可以在保存时查询验证状态，包括子级的验证状态！
        if ((controller.send(EventValidate(), down: true).result as ValidationResponse).canSave == true) {
          // 我们有有效的数据！
          debugPrintSynchronously("VALID DATA:${state.text}");
        }
      },
    ),
  },
  controllerInitializer: (String id, bubbleUpListener) {
    return InterstateController<NestedTextFieldState>(
      id: id,
      initialState: const NestedTextFieldState(text: ""),
      bubbleUpListener: bubbleUpListener,
      handlers: [],
    );
  },
  child: child,
);

3. 定义处理程序来响应事件

handlers: [
  /// 这是一个使用提供的EventValidate和ValidationResponse类的有用示例
  /// 我们可以验证我们的状态，并区分局部错误和子级错误
  EventHandler<EventValidate, NestedTextFieldState>(
    eventDataType: EventValidate,
    resultBuilder: (Event<EventValidate> event, NestedTextFieldState currentState, List<Response<EventValidate, dynamic>> subResponses) => 
        ValidationResponse.fromSubResponses(
            validationError: currentState.text.isEmpty ? "Required!" : null,
            stateError: null,
            subResponses: subResponses),
    stateBuilder: (event, state, result, subresponses) {
      final validationResp = result as ValidationResponse;
    
      if (validationResp.dataValidationError != null) {
        // 如果我们有一个局部验证错误，我们就相应地更新我们的状态
        return state.copyWith(error: validationResp.dataValidationError ?? "");
      } else if (validationResp.childrenHaveErrors) {
        // 如果我们的子级有错误，我们也报告一个错误
        return state.copyWith(error: "Children have errors!");
      } else {
        // 否则清除错误
        return state.copyWith(error: "");
      }
    }),
  /// 这接受一个字符串事件并用它来更新状态文本。通常我们会想将其包装在一个类似于这样的StringUpdateEvent类中，但为了示例代码，我们可以将其视为类型灵活性的演示
  EventHandler<String, NestedTextFieldState>(
    eventDataType: String,
    resultBuilder: (_, __, ___) => null,
    stateBuilder: (event, currentState, ___, ____) => currentState.copyWith(text: event, error: ""),
  ),
],