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

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

动态表单构建简介

obopay_dynamic_form 是一个用于在 Flutter 中快速构建动态表单的插件。通过该插件，您可以根据后端返回的数据动态生成表单，并处理用户输入。

使用步骤

以下是一个完整的示例，展示如何使用 obopay_dynamic_form 插件来创建动态表单。

1. 添加依赖

在 pubspec.yaml 文件中添加 obopay_dynamic_form 依赖：

dependencies:
  obopay_dynamic_form: ^1.0.0

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

2. 导入必要的库

在 Dart 文件中导入所需的库：

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

3. 定义表单字段数据

假设后端返回的表单字段数据如下：

{
  "fields": [
    {
      "key": "name",
      "label": "姓名",
      "type": "text",
      "required": true
    },
    {
      "key": "age",
      "label": "年龄",
      "type": "number",
      "required": false
    },
    {
      "key": "email",
      "label": "邮箱",
      "type": "email",
      "required": true
    }
  ]
}

我们可以将其解析为 Dart 对象：

final formFields = [
  FormField(
    key: 'name',
    label: '姓名',
    type: FieldType.text,
    required: true,
  ),
  FormField(
    key: 'age',
    label: '年龄',
    type: FieldType.number,
    required: false,
  ),
  FormField(
    key: 'email',
    label: '邮箱',
    type: FieldType.email,
    required: true,
  ),
];

4. 创建动态表单

使用 DynamicFormBuilder 构建表单：

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

class _DynamicFormExampleState extends State<DynamicFormExample> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  Map<String, dynamic> _formData = {};

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态表单示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: DynamicFormBuilder(
          formFields: formFields,
          onValueChanged: (Map<String, dynamic> data) {
            setState(() {
              _formData = data;
            });
          },
          formKey: _formKey,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print(_formData);
          }
        },
        child: Icon(Icons.send),
      ),
    );
  }
}