如何在Flutter中使用reactive_forms_generator生成表单代码？

1. 配置依赖 #

首先在pubspec.yaml里添加匹配版本的依赖：

dependencies:
  reactive_forms: ^16.0.0 # 请使用最新稳定版本

dev_dependencies:
  reactive_forms_generator: ^16.0.0 # 版本需与reactive_forms保持一致
  build_runner: ^2.4.0

执行flutter pub get完成依赖安装。

2. 创建带注解的实体类 #

新建实体文件（比如user.dart），给类和字段添加表单生成注解：

import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_forms_generator/reactive_forms_generator.dart';

// 标记该类需要生成对应的表单代码
@FormGroup()
class User {
  // 带必填+邮箱格式校验的表单控件
  @FormControl(validators: [Validators.required, Validators.email])
  final String? email;

  // 带必填+最小长度校验的密码控件
  @FormControl(validators: [Validators.required, Validators.minLength(6)])
  final String? password;

  // 带默认值的复选框控件
  @FormControl(defaultValue: false)
  final bool? rememberMe;

  User({this.email, this.password, this.rememberMe});
}

3. 运行代码生成命令 #

在终端执行以下命令生成表单代码：

# 单次生成代码（适合发布前）
flutter pub run build_runner build

# 实时监听文件变化自动生成（开发时推荐）
flutter pub run build_runner watch

执行完成后，同目录下会生成user.form.dart文件，里面包含自动生成的UserForm类。

4. 在UI中使用生成的表单 #

直接调用生成的表单类，结合ReactiveFormBuilder快速构建表单UI：

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'user.form.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化生成的表单实例
    final form = UserForm(email: '', password: '');

    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: ReactiveFormBuilder(
        form: () => form.formGroup,
        builder: (context, formGroup, child) {
          return Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                // 使用生成的控件属性快速绑定
                ReactiveTextField(
                  formControl: form.email,
                  decoration: const InputDecoration(labelText: '邮箱'),
                ),
                ReactiveTextField(
                  formControl: form.password,
                  obscureText: true,
                  decoration: const InputDecoration(labelText: '密码'),
                ),
                ReactiveCheckbox(
                  formControl: form.rememberMe,
                  title: const Text('记住我'),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: formGroup.valid ? () => _submit(form) : null,
                  child: const Text('登录'),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void _submit(UserForm form) {
    // 直接通过生成的属性获取表单值
    print('邮箱: ${form.email.value}');
    print('密码: ${form.password.value}');
    print('记住我: ${form.rememberMe.value}');
  }
}

常用注解参数说明 #

• @FormControl核心参数：
  • validators: 同步校验器数组，支持Validators类的所有内置校验规则
  • defaultValue: 设置控件初始值
  • asyncValidators: 异步校验器（比如校验邮箱是否已注册）

内容的提问来源于stack exchange，提问作者andy