formux 是一个用于 Flutter 的表单管理插件，它可以帮助开发者更轻松地管理和验证表单数据。formux 提供了一种声明式的方式来定义表单字段、验证规则以及处理表单提交。

以下是 formux 的基本使用步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 formux 依赖：

dependencies:
  flutter:
    sdk: flutter
  formux: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 formux：

import 'package:formux/formux.dart';

3. 创建表单

使用 Formux 来创建表单，并定义表单字段和验证规则。

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Formux(
      fields: {
        'username': FormuxField(
          initialValue: '',
          validators: [
            FormuxValidator.required('Username is required'),
            FormuxValidator.minLength(3, 'Username must be at least 3 characters'),
          ],
        ),
        'password': FormuxField(
          initialValue: '',
          validators: [
            FormuxValidator.required('Password is required'),
            FormuxValidator.minLength(6, 'Password must be at least 6 characters'),
          ],
        ),
      },
      onSubmit: (values) {
        // 处理表单提交
        print('Form submitted with values: $values');
      },
      child: MyFormContent(),
    );
  }
}

class MyFormContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final form = Formux.of(context);

    return Column(
      children: [
        TextFormField(
          decoration: InputDecoration(labelText: 'Username'),
          onChanged: (value) => form.setValue('username', value),
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'Password'),
          obscureText: true,
          onChanged: (value) => form.setValue('password', value),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            if (form.validate()) {
              form.submit();
            }
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

4. 解释代码

• Formux: 这是表单的根组件，它管理所有表单字段的状态和验证。
• FormuxField: 用于定义表单字段的初始值和验证规则。
• FormuxValidator: 提供了一些常用的验证规则，如 required、minLength 等。
• Formux.of(context): 用于获取当前表单的实例，以便在表单内容组件中访问表单方法和状态。
• form.setValue(field, value): 用于更新表单字段的值。
• form.validate(): 用于验证表单字段，如果所有字段都有效则返回 true。
• form.submit(): 提交表单，并触发 onSubmit 回调。

5. 自定义验证规则

你可以通过继承 FormuxValidator 来创建自定义的验证规则：

class CustomValidator extends FormuxValidator {
  CustomValidator(String errorMessage) : super(errorMessage);

  @override
  bool validate(String value) {
    // 自定义验证逻辑
    return value.contains('custom');
  }
}

// 使用自定义验证规则
FormuxField(
  validators: [
    CustomValidator('Value must contain "custom"'),
  ],
);

6. 处理表单状态

你可以通过 Formux 的 onChange 回调来监听表单字段的变化：

Formux(
  onChange: (values) {
    print('Form values changed: $values');
  },
  // ...
);

7. 重置表单

你可以通过 form.reset() 方法来重置表单字段的值：

ElevatedButton(
  onPressed: () {
    form.reset();
  },
  child: Text('Reset'),
);