Flutter动态表单构建插件dynamic_form_pro的使用

dynamic_form_pro 是一个用于 Flutter 的动态表单构建插件，它可以帮助开发者快速构建灵活、动态的表单界面。通过这个插件，你可以根据不同的需求动态生成表单字段，并且可以轻松地处理表单的验证、提交等操作。

安装

首先，你需要在 pubspec.yaml 文件中添加 dynamic_form_pro 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  dynamic_form_pro: ^1.0.0  # 请使用最新版本

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

基本用法

1. 导入包：

   import 'package:dynamic_form_pro/dynamic_form_pro.dart';
   

2. 定义表单字段：

   你可以通过 FormField 类来定义表单字段。FormField 包含了字段的类型、标签、验证规则等信息。

   List<FormField> formFields = [
     FormField(
       type: FormFieldType.text,
       label: 'Username',
       isRequired: true,
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Username is required';
         }
         return null;
       },
     ),
     FormField(
       type: FormFieldType.password,
       label: 'Password',
       isRequired: true,
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Password is required';
         }
         return null;
       },
     ),
     FormField(
       type: FormFieldType.email,
       label: 'Email',
       isRequired: true,
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Email is required';
         }
         if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
           return 'Enter a valid email address';
         }
         return null;
       },
     ),
   ];
   

3. 构建动态表单：

   使用 DynamicForm 组件来构建动态表单。DynamicForm 需要传入 formFields 和一个 onSubmit 回调函数，用于处理表单提交。

   class MyForm extends StatelessWidget {
     final List<FormField> formFields;
   
     MyForm({required this.formFields});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Dynamic Form'),
         ),
         body: Padding(
           padding: const EdgeInsets.all(16.0),
           child: DynamicForm(
             formFields: formFields,
             onSubmit: (Map<String, dynamic> values) {
               // 处理表单提交
               print('Form submitted with values: $values');
             },
           ),
         ),
       );
     }
   }
   

4. 运行应用：

   在你的 main.dart 文件中运行应用：

   void main() {
     runApp(MaterialApp(
       home: MyForm(formFields: formFields),
     ));
   }
   

高级用法

1. 自定义字段类型：

   你可以通过继承 FormFieldType 来创建自定义字段类型。

   class CustomFormFieldType extends FormFieldType {
     CustomFormFieldType() : super('custom');
   
     @override
     Widget buildWidget(BuildContext context, FormField formField) {
       return TextFormField(
         decoration: InputDecoration(labelText: formField.label),
         validator: formField.validator,
       );
     }
   }
   

2. 自定义表单布局：

   你可以通过重写 DynamicForm 的 build 方法来自定义表单的布局。

   class CustomDynamicForm extends DynamicForm {
     CustomDynamicForm({required List<FormField> formFields, required Function(Map<String, dynamic>) onSubmit})
         : super(formFields: formFields, onSubmit: onSubmit);
   
     @override
     Widget build(BuildContext context) {
       return Column(
         children: formFields.map((field) {
           return Padding(
             padding: const EdgeInsets.symmetric(vertical: 8.0),
             child: field.buildWidget(context),
           );
         }).toList(),
       );
     }
   }