如何在Flutter中实现动态表单后端并获取字段控件值

1. 如何创建动态表单后端 #

核心设计要点 #

• 定义字段描述结构：用JSON统一描述表单字段的属性，示例结构如下：

  {
    "formId": "user_reg",
    "fields": [
      {
        "id": "nickname",
        "type": "text",
        "label": "昵称",
        "required": true,
        "defaultValue": "",
        "validationRule": "^[\\u4e00-\\u9fa5a-zA-Z0-9_]{2,12}$"
      },
      {
        "id": "hobby",
        "type": "checkbox",
        "label": "兴趣爱好",
        "required": false,
        "options": [{"label": "读书", "value": "read"}, {"label": "运动", "value": "sport"}]
      }
    ]
  }
  

• 后端接口设计：
  • GET接口：返回上述表单配置JSON，供Flutter端渲染动态表单
  • POST接口：接收Flutter端提交的键值对数据（键为字段ID，值为用户输入内容），完成校验与存储
• 数据存储方案：
  • 表单模板：用关系型数据库（如MySQL）存储，字段包含模板ID、配置JSON、创建时间等
  • 用户提交数据：用文档型数据库（如MongoDB）存储，适配动态字段结构的存储需求
• 校验逻辑：接收提交数据后，依据表单配置中的规则（必填、正则等）做后端校验，通过后再执行业务操作

2. 现有动态表单提交时获取控件值 #

实现方案（结合DyDataList、FormScreen） #

1. 初始化状态容器
   在FormScreen中定义表单全局Key和状态存储集合：

   final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
   final Map<String, TextEditingController> _textControllers = {};
   final Map<String, dynamic> _selectionValues = {}; // 存储单选、多选等非输入框类型的值
   

2. 绑定后端数据初始化控制器
   在initState中遍历后端返回的字段列表，创建对应控制器：

   @override
   void initState() {
     super.initState();
     // 假设dynamicFields是从后端获取的字段数组
     for (var field in dynamicFields) {
       if (field.type == 'text' || field.type == 'number') {
         _textControllers[field.id] = TextEditingController(text: field.defaultValue);
       }
       // 单选、下拉选字段初始化默认值
       if (field.type == 'radio' || field.type == 'select') {
         _selectionValues[field.id] = field.defaultValue;
       }
     }
   }
   

3. 动态生成绑定状态的表单控件
   在Form组件中根据字段类型渲染对应控件：

   Form(
     key: _formKey,
     child: Column(
       children: dynamicFields.map((field) {
         switch(field.type) {
           case 'text':
             return TextFormField(
               controller: _textControllers[field.id],
               decoration: InputDecoration(labelText: field.label),
               validator: (value) {
                 if (field.required && (value == null || value.isEmpty)) {
                   return '请填写${field.label}';
                 }
                 return null;
               },
             );
           case 'radio':
             return Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(field.label),
                 ...field.options.map((opt) {
                   return RadioListTile(
                     title: Text(opt.label),
                     value: opt.value,
                     groupValue: _selectionValues[field.id],
                     onChanged: (value) {
                       setState(() {
                         _selectionValues[field.id] = value;
                       });
                     },
                   );
                 }).toList()
               ],
             );
           // 多选、日期选择等类型可参照上述逻辑实现
           default:
             return SizedBox.shrink();
         }
       }).toList(),
     ),
   )
   

4. 提交时收集所有字段值
   点击提交按钮时，先校验表单，再汇总所有字段值：

   ElevatedButton(
     onPressed: () {
       if (_formKey.currentState!.validate()) {
         Map<String, dynamic> submitData = {};
         // 收集输入框类字段值
         _textControllers.forEach((key, controller) {
           submitData[key] = controller.text.trim();
         });
         // 收集单选、多选等字段值
         _selectionValues.forEach((key, value) {
           submitData[key] = value;
         });
         // 此处将submitData发送至后端接口
         print('提交数据：$submitData');
       }
     },
     child: Text('提交'),
   )
   

5. 资源清理
   在dispose方法中销毁控制器，避免内存泄漏：

   @override
   void dispose() {
     _textControllers.values.forEach((controller) => controller.dispose());
     super.dispose();
   }
   

内容的提问来源于stack exchange，提问作者semwal rj