Flutter表单管理插件form4的使用

简介

form4 是一个简单且可定制的 Flutter 表单插件，它原生支持服务器端验证或两步验证。与传统表单不同，Form4 不会强制你使用它的内置 Widget，而是鼓励你在 Form4 中构建自己的自定义 Widget，只需通过一个小的 Form4Field 包装器即可。

Form4 的核心功能是帮助你连接自己的控制器，并使用 ValueBinder 概念来收集表单提交时的所有字段值，同时在打开表单时设置现有的字段值。

特性

• 灵活性：你可以使用自己的自定义 Widget 来构建表单。
• ValueBinder：用于收集和设置表单字段的值。
• 验证机制：支持字段级别的验证逻辑。

开始使用

1. 添加依赖

在你的 pubspec.yaml 文件中添加 form4 依赖：

dependencies:
  form4: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 导入库

在你的 Dart 文件中导入 form4 库：

import 'package:form4/form4.dart';

使用示例

以下是一个完整的示例代码，展示了如何使用 Form4 插件来创建一个简单的登录表单。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Form4 示例')),
        body: LoginForm(),
      ),
    );
  }
}

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

class _LoginFormState extends State<LoginForm> {
  final formController = FormController(); // 表单控制器
  final userController = TextEditingController(text: ''); // 用户名控制器
  final pwdController = TextEditingController(text: ''); // 密码控制器

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form4(
      controller: formController, // 绑定表单控制器
      child: Padding(
        padding: EdgeInsets.all(20), // 表单内边距
        child: Column(
          children: [
            // 用户名字段
            Form4Field<String>(
              formController: formController,
              fieldName: 'username',
              builder: (field) => TextField(
                controller: userController,
                decoration: InputDecoration(
                  labelText: '用户名',
                  filled: true,
                  border: InputBorder.none,
                ),
              ),
              valueBinder: ValueBinders.text(userController),
              validator: Validators.stringShouldNotBeEmpty('用户名不能为空'), // 验证规则
            ),

            // 密码字段
            Form4Field<String>(
              formController: formController,
              fieldName: 'password',
              builder: (field) => TextField(
                controller: pwdController,
                obscureText: true,
                decoration: InputDecoration(
                  labelText: '密码',
                  filled: true,
                  border: InputBorder.none,
                ),
              ),
              valueBinder: ValueBinders.text(pwdController),
              validator: Validators.stringShouldNotBeEmpty('密码不能为空'), // 验证规则
            ),

            // 提交按钮
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (formController.validate()) {
                  print('表单验证通过');
                  print('用户名: ${userController.text}');
                  print('密码: ${pwdController.text}');
                } else {
                  print('表单验证失败');
                }
              },
              child: Text('提交'),
            ),
          ],
        ),
      ),
    );
  }
}