Flutter插件reform_flutter的使用方法详解

在Flutter开发中，表单处理是一个常见的需求。本文将介绍如何使用一个名为reform_flutter的插件来实现受控输入和友好的用户验证。

功能特性

定义字段

首先，我们需要定义表单的字段：

class Form {
    final String username;
    final String password;
    final String repeatPassword;

    final bool wasEverSubmitted; // 用户尝试提交过

    ...
}

添加字段验证

接下来，为每个字段添加验证逻辑：

class Form {
  final String username;
  final String password;
  final String repeatPassword;
  
  Form({
    required this.username,
    required this.password,
    required this.repeatPassword,
  });

  late final usernameField = refield(username).validate((value) {
    if (value.length < 8) {
      return "最少8个字符"; // 至少8个字符
    } else if (value.length > 16) {
      return "最多16个字符"; // 最多16个字符
    } else if (isAlphanumeric(value)) {
      return "仅允许数字和字母"; // 只允许数字和字母
    }
    return null; // 验证通过
  });

  late final passwordField = refield(password).validate(
    (value) => value.length < 8 ? "至少8个字符" : null, // 密码长度至少8个字符
  );

  late final repeatPasswordField = refield(repeatPassword).validate(
    (value) => value != password ? "密码不匹配" : null, // 确认密码与原始密码一致
  );
}

包裹Flutter的TextField

然后，我们将TextField包裹起来以支持验证：

Widget build(BuildContext context) {
  final form = FormViewModel.of(context).form;
  return Column(
    children: [
      form.usernameField.builder(
        builder: (context, controller, errorText) => TextField(
          controller: controller, // 提供控制器
          decoration: InputDecoration(errorText: errorText), // 显示错误信息
          onChanged: formViewModel.onUsernameChanged, // 更新用户名状态
        ),
      ),
      form.passwordField.builder(
        builder: (context, controller, errorText) => TextField(
          controller: controller,
          decoration: InputDecoration(errorText: errorText), // 显示错误信息
          onChanged: formViewModel.onPasswordChanged, // 更新密码状态
        ),
      ),
      form.repeatPasswordField.builder(
        builder: (context, controller, errorText) => TextField(
          controller: controller,
          decoration: InputDecoration(errorText: errorText), // 显示错误信息
          onChanged: formViewModel.onRepeatPasswordChanged, // 更新确认密码状态
        ),
      ),
    ]
  );
}

现在，表单已经可以正常工作了！

错误提示时机调整

默认情况下，错误会在用户输入时立即显示，这可能不够友好。我们可以使用ReformScope来优化错误提示的时机。

使用ReformScope

我们可以通过ReformScope来控制错误提示的显示时机：

Widget build(BuildContext context) {
  return ReformScope(
    // 示例：根据Provider的状态决定何时显示错误
    shouldShowError: (context, fieldState) => FormViewModel.of(context).wasEverSubmitted || fieldState.wasEverUnfocused,
    child: ... // 包含字段的Widget树
  );
} 

现在，错误将在以下情况下显示：

• 用户提交表单后。
• 字段失去焦点后（用户完成输入）。

处理表单提交

最后，我们来看看如何处理表单提交。这里我们使用ChangeNotifier来管理表单状态：

class FormViewModel extends ChangeNotifier {
  void submit() {
    this.form = form.copyWith(wasEverSubmitted: true); // 标记表单已提交
    notifyListeners(); // 通知UI更新

    // 验证多个字段是否有效
    final isValid = Reform.isValid([
      form.usernameField,
      form.passwordField,
      form.repeatPasswordField,
    ]);

    if (isValid) {
      // 发送POST请求到服务器
    }
  }
}