Flutter表单生成插件flutter_form_gen_annotation的使用

本README描述了该包。如果您将此包发布到pub.dev，则此README的内容将出现在您的包的首页上。

功能 #

TODO: 列出您的包可以做什么。可能包括图片、GIF或视频。

开始使用 #

TODO: 列出前提条件并提供或指向如何开始使用该包的信息。

使用 #

TODO: 包含对用户有用的简短示例。将较长示例添加到/example文件夹。

// 引入必要的库
import 'package:flutter/material.dart';
import 'package:flutter_form_gen_annotation/flutter_form_gen_annotation.dart';

// 定义一个简单的表单模型类
class UserForm {
  @Field(label: '姓名', required: true)
  String name;

  @Field(label: '年龄', required: true)
  int age;

  @Field(label: '邮箱', required: false)
  String email;
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Form Gen Annotation Demo')),
        body: Center(
          child: FormGenerator(
            formModel: UserForm(),
            onSubmit: (UserForm form) {
              print('Name: ${form.name}');
              print('Age: ${form.age}');
              print('Email: ${form.email}');
            },
          ),
        ),
      ),
    );
  }
}

更多信息 #

TODO: 告诉用户更多关于包的信息：在哪里找到更多信息，如何为包做贡献，如何提交问题，用户可以期望从包作者那里得到什么响应等。

```

补充说明

在上述示例代码中，我们定义了一个简单的表单模型类 UserForm，其中包含三个字段：姓名、年龄和邮箱。通过 @Field 注解来指定每个字段的标签和是否必填。

在 main 函数中，我们创建了一个 MaterialApp 并在 Scaffold 中放置了一个 FormGenerator 组件。FormGenerator 会根据传入的 UserForm 实例自动生成表单，并在提交时打印表单数据。

请确保在项目中正确安装并导入 flutter_form_gen_annotation 包。你可以通过以下方式将其添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  flutter_form_gen_annotation: ^1.0.0  # 请检查最新版本

更多关于Flutter表单生成插件flutter_form_gen_annotation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单生成插件flutter_form_gen_annotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_form_gen_annotation 是一个用于 Flutter 的代码生成插件，它可以帮助你自动生成表单相关的代码。通过使用注解（annotations），你可以定义表单字段，并且插件会自动生成相应的表单控件和验证逻辑。

安装步骤

  1. 添加依赖： 在你的 pubspec.yaml 文件中添加以下依赖：

    dependencies:
  flutter:
    sdk: flutter
  flutter_form_gen_annotation: ^1.0.0

dev_dependencies:
  build_runner: ^2.1.0
  flutter_form_gen: ^1.0.0

  2. 运行 flutter pub get： 安装依赖。

使用步骤

  1. 定义表单模型： 创建一个 Dart 类，并使用 [@FormGen](/user/FormGen)() 注解标记它。然后在类中定义表单字段，并使用 [@FormField](/user/FormField)() 注解标记每个字段。

    import 'package:flutter_form_gen_annotation/flutter_form_gen_annotation.dart';

part 'user_form.g.dart';

[@FormGen](/user/FormGen)()
class UserForm {
  [@FormField](/user/FormField)(
    label: 'Username',
    placeholder: 'Enter your username',
    validator: 'required',
  )
  String username;

  [@FormField](/user/FormField)(
    label: 'Email',
    placeholder: 'Enter your email',
    validator: 'email',
  )
  String email;

  [@FormField](/user/FormField)(
    label: 'Password',
    placeholder: 'Enter your password',
    validator: 'required',
    isPassword: true,
  )
  String password;
}

  2. 生成代码： 运行以下命令来生成表单代码：

    flutter pub run build_runner build

    这将会生成一个 user_form.g.dart 文件，其中包含了表单控件的生成代码。

  3. 使用生成的表单： 在你的 Flutter 应用中，使用生成的表单控件来构建 UI。

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

class UserFormPage extends StatelessWidget {
  final UserForm form = UserForm();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            form.usernameField(),
            form.emailField(),
            form.passwordField(),
            ElevatedButton(
              onPressed: () {
                if (form.validate()) {
                  // 表单验证通过，处理表单数据
                  print('Username: ${form.username}');
                  print('Email: ${form.email}');
                  print('Password: ${form.password}');
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

注解说明

  • [@FormGen](/user/FormGen)()：标记一个类为表单生成类。
  • [@FormField](/user/FormField)()：标记一个字段为表单字段，可以指定标签、占位符、验证规则等。

常见验证规则

  • required：字段必填。
  • email：验证电子邮件格式。
  • minLength：最小长度。
  • maxLength：最大长度。

自定义验证规则

你还可以通过传递一个自定义的验证函数来实现更复杂的验证逻辑。

[@FormField](/user/FormField)(
  label: 'Custom Field',
  placeholder: 'Enter something',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'This field is required';
    }
    return null;
  },
)
String customField;
回到顶部