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

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

一个简单的具有动态内容的StatefulWidget表单。

功能特性

  • 支持TextField、TextArea、OptionPicker（多选/单选、下拉或单选按钮）

开始使用

  • 这个库还处于早期状态，因此未来版本可能会有重大更改。

使用方法

1. 首先创建一个继承自DynamicFormController的控制器，并在构造函数中设计表单

class NewProjectDFController extends DynamicFormController {
  NewProjectDFController() {
    // 设计表单
    formCreation = DynamicFormCreation(fields: [
      DynamicFormField(id: 'name',
          name: '项目名称',
          fieldType: DynamicFormFieldTypes.TextField),
      DynamicFormField(id: 'desc',
          name: '项目描述',
          fieldType: DynamicFormFieldTypes.TextArea),
      DynamicFormField.createDropdownSelect('category', '类别', items: [
        '应用构建器',
        '故事构建器',
        '课程构建器',
        '营销活动构建器'
      ])
    ]);
  }
}

2. 然后声明一个控制器实例并在initState()中绑定状态

// 声明控制器
NewProjectDFController newProjectFormController = NewProjectDFController();

// 绑定状态
@override
void initState() {
  super.initState();
  newProjectFormController.bindState(reloadForm: () => setState(() {}));
}

3. 在build()方法中将其用作对话框内容或其他小部件

showAddNewProjectDialog() {
  showDialog(context: context, builder: (_) => AlertDialog(
    title: Text("创建新项目"),
    content: newProjectFormController.buildForm(context),
    actions: [
      ElevatedButton(
        onPressed: () {
          bool isValid = newProjectFormController.validateFields();
          if (isValid) {
            Navigator.pop(context);
            var model = newProjectFormController.formValues;
            debugPrint("新项目模型:");
            debugPrint(jsonEncode(model));
          }
        },
        child: Text("创建")
      )
    ],
  ));
}

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

1 回复

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


oss4bw_dynamic_form 是一个用于在 Flutter 应用中构建动态表单的插件。它允许开发者通过 JSON 配置文件来定义表单字段，从而动态生成表单界面。这个插件非常适合需要动态生成表单的场景，比如调查问卷、数据录入等。

安装插件

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

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

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

使用插件

1. 定义表单配置

你可以通过 JSON 文件来定义表单的字段和布局。以下是一个简单的 JSON 配置示例：

{
  "fields": [
    {
      "type": "text",
      "label": "姓名",
      "key": "name",
      "placeholder": "请输入您的姓名",
      "required": true
    },
    {
      "type": "email",
      "label": "邮箱",
      "key": "email",
      "placeholder": "请输入您的邮箱",
      "required": true
    },
    {
      "type": "password",
      "label": "密码",
      "key": "password",
      "placeholder": "请输入您的密码",
      "required": true
    },
    {
      "type": "date",
      "label": "出生日期",
      "key": "birthdate",
      "required": true
    },
    {
      "type": "dropdown",
      "label": "性别",
      "key": "gender",
      "options": [
        {"label": "男", "value": "male"},
        {"label": "女", "value": "female"}
      ],
      "required": true
    }
  ]
}

2. 加载表单配置并生成表单

在 Flutter 应用中，你可以通过以下步骤来加载 JSON 配置并生成表单：

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

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

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

  void _onSubmit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 处理表单数据
      print(_formData);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态表单'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: DynamicForm(
              formConfig: '''
              {
                "fields": [
                  {
                    "type": "text",
                    "label": "姓名",
                    "key": "name",
                    "placeholder": "请输入您的姓名",
                    "required": true
                  },
                  {
                    "type": "email",
                    "label": "邮箱",
                    "key": "email",
                    "placeholder": "请输入您的邮箱",
                    "required": true
                  },
                  {
                    "type": "password",
                    "label": "密码",
                    "key": "password",
                    "placeholder": "请输入您的密码",
                    "required": true
                  },
                  {
                    "type": "date",
                    "label": "出生日期",
                    "key": "birthdate",
                    "required": true
                  },
                  {
                    "type": "dropdown",
                    "label": "性别",
                    "key": "gender",
                    "options": [
                      {"label": "男", "value": "male"},
                      {"label": "女", "value": "female"}
                    ],
                    "required": true
                  }
                ]
              }
              ''',
              onChanged: (Map<String, dynamic> data) {
                setState(() {
                  _formData = data;
                });
              },
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onSubmit,
        child: Icon(Icons.save),
      ),
    );
  }
}
回到顶部