Flutter表单注解插件cumulations_form_annotations的使用

Flutter 表单注解插件 cumulations_form_annotations 的使用

在 Flutter 中，表单数据处理是一个常见的需求。cumulations_form_annotations 插件通过注解的方式简化了表单生成的过程。本文将介绍如何使用 cumulations_form_annotations 插件来创建一个简单的表单。

开始前的准备

确保你已经在项目的 pubspec.yaml 文件中添加了以下依赖：

dependencies:
  flutter:
    sdk: flutter
  cumulations_form_annotations: ^版本号

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

使用示例

1. 添加注解

首先，我们需要为表单字段添加注解。这些注解会帮助我们生成表单并进行验证。

import 'package:cumulations_form_annotations/cumulations_form_annotations.dart';

class User {
  @Field(label: '姓名')
  String name;

  @Field(label: '年龄', validators: [MinValueValidator(0), MaxValueValidator(150)])
  int age;

  @Field(label: '邮箱', validators: [EmailValidator()])
  String email;
}

2. 创建表单

接下来，我们将使用注解自动生成表单。

import 'package:flutter/material.dart';
import 'package:cumulations_form_annotations/cumulations_form_annotations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('表单示例')),
        body: FormGenerator<User>(formModel: User()),
      ),
    );
  }
}

3. 自定义表单字段

如果你需要对表单字段进行更细粒度的控制，可以自定义表单字段。

class CustomForm extends StatefulWidget {
  [@override](/user/override)
  _CustomFormState createState() => _CustomFormState();
}

class _CustomFormState extends State<CustomForm> {
  final formKey = GlobalKey<FormState>();
  final user = User();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: user.getField('name').label),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入姓名';
              }
              return null;
            },
            onSaved: (value) => user.name = value!,
          ),
          TextFormField(
            decoration: InputDecoration(labelText: user.getField('age').label),
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入年龄';
              }
              final age = int.tryParse(value);
              if (age == null || age < 0 || age > 150) {
                return '年龄必须在0到150之间';
              }
              return null;
            },
            onSaved: (value) => user.age = int.parse(value!),
          ),
          TextFormField(
            decoration: InputDecoration(labelText: user.getField('email').label),
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入邮箱';
              }
              if (!RegExp(r'^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$').hasMatch(value)) {
                return '请输入有效的邮箱地址';
              }
              return null;
            },
            onSaved: (value) => user.email = value!,
          ),
          ElevatedButton(
            onPressed: () {
              if (formKey.currentState!.validate()) {
                formKey.currentState!.save();
                // 处理提交的数据
                print(user);
              }
            },
            child: Text('提交'),
          )
        ],
      ),
    );
  }
}