Flutter字段代理插件field_delegate的使用

field_delegate 是一个 Flutter 插件，用于简化表单字段的管理和验证。它通过代理模式将字段的状态管理和验证逻辑与 UI 分离，使得代码更加简洁和易于维护。

安装

首先，在 pubspec.yaml 文件中添加 field_delegate 插件的依赖：

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

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

基本用法

1. 创建字段代理

   使用 FieldDelegate 来创建字段代理。你可以为每个表单字段创建一个代理，并指定验证规则。

   import 'package:field_delegate/field_delegate.dart';
   
   final emailField = FieldDelegate<String>(
     validator: (value) {
       if (value == null || value.isEmpty) {
         return 'Email is required';
       }
       if (!value.contains('@')) {
         return 'Invalid email format';
       }
       return null;
     },
   );
   
   final passwordField = FieldDelegate<String>(
     validator: (value) {
       if (value == null || value.isEmpty) {
         return 'Password is required';
       }
       if (value.length < 6) {
         return 'Password must be at least 6 characters';
       }
       return null;
     },
   );
   

2. 在 UI 中使用字段代理

   在 TextField 中使用 FieldDelegate 来管理字段的状态和验证。

   import 'package:flutter/material.dart';
   
   class LoginForm extends StatelessWidget {
     final emailField = FieldDelegate<String>(
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Email is required';
         }
         if (!value.contains('@')) {
           return 'Invalid email format';
         }
         return null;
       },
     );
   
     final passwordField = FieldDelegate<String>(
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Password is required';
         }
         if (value.length < 6) {
           return 'Password must be at least 6 characters';
         }
         return null;
       },
     );
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Login'),
         ),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
             children: [
               TextField(
                 decoration: InputDecoration(
                   labelText: 'Email',
                   errorText: emailField.error,
                 ),
                 onChanged: emailField.update,
               ),
               SizedBox(height: 16),
               TextField(
                 obscureText: true,
                 decoration: InputDecoration(
                   labelText: 'Password',
                   errorText: passwordField.error,
                 ),
                 onChanged: passwordField.update,
               ),
               SizedBox(height: 16),
               ElevatedButton(
                 onPressed: () {
                   if (emailField.validate() && passwordField.validate()) {
                     // 表单验证通过，执行登录逻辑
                     print('Email: ${emailField.value}');
                     print('Password: ${passwordField.value}');
                   }
                 },
                 child: Text('Login'),
               ),
             ],
           ),
         ),
       );
     }
   }
   

3. 验证表单

   在按钮的 onPressed 回调中，调用 validate() 方法来验证字段。如果所有字段都通过验证，则可以继续执行后续逻辑。

高级用法

1. 自定义验证规则

   你可以在 validator 中定义复杂的验证逻辑，甚至可以结合正则表达式进行验证。

2. 监听字段变化

   FieldDelegate 提供了 addListener 方法，可以监听字段值的变化。

   emailField.addListener(() {
     print('Email changed: ${emailField.value}');
   });
   

3. 重置字段

   你可以使用 reset() 方法来重置字段的值和错误状态。

   emailField.reset();
   passwordField.reset();