flutter 中实现动态表单 form generator

这篇具有很好参考价值的文章主要介绍了flutter 中实现动态表单 form generator。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter 中实现动态表单 form generator

flutter 中实现动态表单 form generator,程序人生

前言

最近有人问我 flutter 前端如何处理动态表单。

这种是企业开发中的常见问题,特别是问卷和工作流审核表单。

今天我们就来实现下这个功能,主要是处理这个业务功能的思路。

flutter 中实现动态表单 form generator,程序人生

原文 https://ducafecat.com/blog/flutter-form-generate-dymic-data

参考

http://www.form-create.com/designer/

https://github.com/GavinZhuLei/vue-form-making

https://github.com/JakHuang/form-generator

https://github.com/xaboy/form-create

动态表单

动态表单是一种可以根据配置数据动态生成的表单,它的作用是允许用户在运行时根据不同的需求动态地创建和修改表单内容。动态表单可以在许多业务场景中使用,以下是一些示例:

  1. 数据录入和管理:在许多应用程序中,用户需要输入和管理各种数据。动态表单可以为应用程序提供灵活的数据输入和管理方案,允许用户根据需要动态添加、编辑和删除表单字段。

  2. 问卷和调查:动态表单是创建问卷和调查的理想方式。它可以允许用户根据需要动态添加和编辑问题、选项和其他信息,从而创建一个灵活的问卷和调查表单。

  3. 订单和支付:在电子商务应用程序中,用户通常需要填写订单和支付信息。动态表单可以为这些应用程序提供灵活的订单和支付表单,允许用户根据需要动态添加、编辑和删除字段。

  4. 审批流程:在许多企业中,审批流程是非常重要的。动态表单可以为这些企业提供灵活的审批表单,允许用户根据需要动态添加和编辑审批字段、审批流程和其他信息。

表单数据

[
  {
    "type""input",
    "field""Ff1s5zfzgmk0x",
    "title""输入框",
    "info""",
    "_fc_drag_tag""input",
    "hidden"false,
    "display"true
  },
  {
    "type""input",
    "field""Fxf25zfzgn8kc",
    "title""输入框",
    "info""",
    "_fc_drag_tag""input",
    "hidden"false,
    "display"true
  },
  {
    "type""checkbox",
    "field""Fn5j5zfzgnxt1",
    "title""多选框",
    "info""",
    "effect": {
      "fetch"""
    },
    "options": [
      {
        "value""1",
        "label""选项1"
      },
      {
        "value""2",
        "label""选项2"
      }
    ],
    "_fc_drag_tag""checkbox",
    "hidden"false,
    "display"true
  },
  {
    "type""FcRow",
    "children": [
      {
        "type""col",
        "props": {
          "span"24
        },
        "children": [
          {
            "type""input",
            "field""Fih81nuhorr201",
            "title""输入框",
            "info""",
            "_fc_drag_tag""input",
            "hidden"false,
            "display"true
          },
          {
            "type""input",
            "field""Fnac1nuhos3090",
            "title""输入框",
            "info""",
            "_fc_drag_tag""input",
            "hidden"false,
            "display"true
          }
        ],
        "_fc_drag_tag""col",
        "hidden"false,
        "display"true
      }
    ],
    "_fc_drag_tag""row",
    "hidden"false,
    "display"true
  },
  {
    "type""el-button",
    "children": [
      "按钮"
    ],
    "_fc_drag_tag""el-button",
    "hidden"false,
    "display"true
  }
]

步骤

第一步:动态表单组件 DynamicForm

lib/form.dart

准备参数

  /// 表单数据
  final List<dynamic> data;

  /// 通用 文字输入框回调
  final Function(Map item, String value) textFormFieldChanged;

data 是压入的数据

textFormFieldChanged 是通用的组件处理回调函数

构建表单递归函数

  /// 构建表单
  List<Widget> _buildForm(List<dynamic> data) {
    List<Widget> widgets = [];
    for (var item in data) {
      switch (item['type']) {
        case 'input':
          widgets.add(TextFormField(
            decoration: InputDecoration(
              labelText: item['title'],
            ),
            onChanged: (value) => textFormFieldChanged(item, value),
          ));
          break;
        case 'checkbox':
          List<Widget> options = [];
          for (var option in item['options']) {
            options.add(Row(
              children: [
                Checkbox(
                  value: false,
                  onChanged: (value) {},
                ),
                Text(option['label']),
              ],
            ));
          }
          widgets.add(Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(item['title']),
              Column(children: options),
            ],
          ));
          break;
        case 'FcRow':
          List<Widget> children = _buildForm(item['children']);
          widgets.add(Row(children: children));
          break;
        case 'col':
          int span = item['props']['span'];
          List<Widget> colChildren = _buildForm(item['children']);
          if (span > 0 && span <= 24) {
            widgets.add(Expanded(
              flex: span,
              child: Column(children: colChildren),
            ));
          } else {
            widgets.add(Column(children: colChildren));
          }
          break;
        case 'el-button':
          widgets.add(ElevatedButton(
            onPressed: () {},
            child: Text(item['children'][0]),
          ));
          break;
        default:
          break;
      }
    }
    return widgets;
  }

children 节点表示子节点,我们用 _buildForm 函数嵌套方式执行

build 函数

  @override
  Widget build(BuildContext context) {
    return Column(
      children: _buildForm(data),
    );
  }

这是使用 Column ,因为一般表单数据还包含其它配置,如页头页尾,需要你去适配。

第二步:业务页面使用 FormPage

lib/page.dart

准备数据

  List<dynamic> jsonData = [
    {
      "type""input",
      "field""Ff1s5zfzgmk0x",
      "title""输入框",
      "info""",
      "_fc_drag_tag""input",
      "hidden"false,
      "display"true
    },
    {
      "type""input",
      "field""Fxf25zfzgn8kc",
      "title""输入框",
      "info""",
      "_fc_drag_tag""input",
      "hidden"false,
      "display"true
    },
    {
      "type""checkbox",
      "field""Fn5j5zfzgnxt1",
      "title""多选框",
      "info""",
      "effect": {"fetch"""},
      "options": [
        {"value""1""label""选项1"},
        {"value""2""label""选项2"}
      ],
      "_fc_drag_tag""checkbox",
      "hidden"false,
      "display"true
    },
    {
      "type""FcRow",
      "children": [
        {
          "type""col",
          "props": {"span"24},
          "children": [
            {
              "type""input",
              "field""Fih81nuhorr201",
              "title""输入框",
              "info""",
              "_fc_drag_tag""input",
              "hidden"false,
              "display"true
            },
            {
              "type""input",
              "field""Fnac1nuhos3090",
              "title""输入框",
              "info""",
              "_fc_drag_tag""input",
              "hidden"false,
              "display"true
            }
          ],
          "_fc_drag_tag""col",
          "hidden"false,
          "display"true
        }
      ],
      "_fc_drag_tag""row",
      "hidden"false,
      "display"true
    },
    {
      "type""el-button",
      "children": ["按钮"],
      "_fc_drag_tag""el-button",
      "hidden"false,
      "display"true
    }
  ];

更新数据

  void setNewValue(String field, String value, List<dynamic> data) {
    for (var item in data) {
      if (item['field'] == field) {
        item['new_value'] = value;
        return;
      } else if (item.containsKey('children')) {
        setNewValue(field, value, item['children']);
      }
    }
  }

field 字段是每个组件的唯一标识

直接在后端给的数据结构中加入 new_value 属性,最后我们会一起传回服务器

通用 输入框回调函数

  void textFormFieldChanged(Map item, String value) {
    setNewValue(item["field"], value, jsonData);
  }

组件抛出业务层式,把整个 item 一起跑出

因为每个组件还配置了一定的业务配置

同时带上你的新数据

build函数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Form Page'),
      ),
      // 动态表单
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: DynamicForm(
          data: jsonData,
          textFormFieldChanged: textFormFieldChanged,
        ),
      ),
    );
  }

最后:提交到服务器端

lib/page.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Form Page'),

        // 保存提交到服务器
        actions: [
          IconButton(
            icon: const Icon(Icons.save),
            onPressed: () {
              if (kDebugMode) {
                print(jsonData);
              }
            },
          ),
        ],
      ),

      // 动态表单
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: DynamicForm(
          data: jsonData,
          textFormFieldChanged: textFormFieldChanged,
        ),
      ),
    );
  }

我们通过日志查看提交的数据

flutter 中实现动态表单 form generator,程序人生

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_form_generater

小结

总之,动态表单可以在许多业务场景中使用,它可以为应用程序提供灵活的数据输入和管理方案,从而满足用户不同的需求。

在实际业务中客户端需要处理大量的动态业务,比如数据联动、卡片嵌套、内嵌导航,祝大家好运。

感谢阅读本文

如果我有什么错?请在评论中让我知道。我很乐意改进。


© 猫哥 ducafecat.com

end

本文由 mdnice 多平台发布文章来源地址https://www.toymoban.com/news/detail-517692.html

到了这里,关于flutter 中实现动态表单 form generator的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+element,form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则

    原文发布链接:https://juejin.cn/post/7181752966611730492 需求: 可点击新增,自动添加表单。(这个不难v-for即可) 可自定义方法校验添加的表单内容。(需要掌握element组件的规则,本人没有熟读官网,碰壁好多次才整理出来这篇文章。重要的事说3遍: 看官网看官网看官网 ) 效果

    2024年02月04日
    浏览(66)
  • Element-UI可以动态生成的form表单

    此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是一个对象数组,但我们需要的是表单的值组成的对象

    2024年02月11日
    浏览(51)
  • element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate

    element UI —— form表单中Radio单选框进行切换 表单验证rule动态校验-validator 保存前进行form表单校验后才能上传-validate 1、效果图 2、代码 结构 数据

    2024年02月07日
    浏览(53)
  • el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

    el-form常规校验方式: 正题部分-表单动态校验 场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验 效果: 关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件

    2024年02月09日
    浏览(53)
  • Element Plus Form 动态表单自定义校验规则使用教程

    Element Plus,基于 Vue 3,面向设计师和开发者的组件库 Element Plus 官网:https://element-plus.org/zh-CN/ Element Plus Form 动态表单自定义效验规则,官网示例代码中没有,官网示例中的动态表单是固定的规则,本文讲解动态表单自定义规则的使用 目录 1、官网动态表单示例代码 2、表单自

    2024年01月18日
    浏览(51)
  • lp-vant-form微信小程序动态表单

    lp-vant-form 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。 依赖 Vant Weapp UI 组件库 通过 JSON 生成表单 支持数据联动 数据验证 数据处理 内置组件 input picker date upload address 通过 JSON 快速的配置表单项规则。内置多种场景、功能的表单组件

    2024年02月03日
    浏览(44)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(51)
  • 在react antd中动态生成多个 form表单组,包括一个动态添加/删除表单项的功能和一个提交表单的功能

    在这个示例中,我们首先使用 Form.useForm() 创建一个表单实例。接着,我们使用 Form.List 组件来动态生成多个表单项。在 Form.List 组件中,我们使用 fields.map 方法循环渲染每个表单项,并使用 Form.Item 组件包裹每个表单项。在 Form.Item 组件中,我们使用 label 属性指定标签,使用

    2024年02月15日
    浏览(57)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(60)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包