Flutter：动态表单（在不确定字段的情况下，生成动态表单）

关于数据模型：模型就是一种规范约束，便于维护管理，在不确定表单内会出现什么数据时，就没有模型一说。 这时就要用到动态表单（根据接口返回的字段，生成动态表单）

1、观察数据格式，定义模型

modelData:[ { id:1, name:'模型一', ctaVal:{ "first_usdt": {"val": "10", "title": "首仓金额", "unit": "usdt", "read": "0" }, } }, { id:2, name:'模型二', ctaVal:{ "min_profit": {"val": "2", "title": "最小收益率", "unit": "%", "read": "1"} } } ] 上边自定义的数据格式，已知id和name为固定格式， ctaVal内的数据不确定具体会返回什么信息， 接口从别的地方抓取的数据，不确定具体字段， 需要动态展示的数据定义：`final Map<String, dynamic> ctaVal;` class DynamicFormModel { int? id; String? name; final Map<String, dynamic> ctaVal; DynamicFormModel ({ required this.id, required this.name, required this.ctaVal, }); factory DynamicFormModel .fromJson(Map<String, dynamic> json) { return StrategyListModel( id: json['id'] as int?, name: json['name'] as String?, ctaVal: json['ctaVal'] ?? {}, ); } Map<String, dynamic> toJson() => { 'id': id, 'name': name, 'ctaVal': ctaVal, }; }

2、接口处理，请求数据，

// 模型列表 List<DynamicFormModel> modelList = []; // 当前选中的模型id int modelId = 0; // 当前选中的模型 DynamicFormModel? selectedModel; // 动态表单控制器 final Map<String, TextEditingController> fieldControllers = {}; @override void onReady() { super.onReady(); // 获取模型列表、默认模型为第一条数据 modelList = modelData.map((e) => DynamicFormModel .fromJson(e)).toList(); if (modelList.isNotEmpty) { selectedModel = modelList.first; modelController.text = selectedModel?.name ?? ''; modelId = selectedModel?.id ?? 0; } update(["strategy_add"]); } @override void onClose() { super.onClose(); // 释放所有控制器 fieldControllers.forEach((key, controller) { controller.dispose(); }); } void submit() async{ // 获取每个字段的值 for (var entry in fieldControllers.entries) { if (entry.value.text.isEmpty) { Loading.toast('请输入完整内容'); return; } } // 收集动态表单内的数据，key=键名（first_usdt） Map<String, String> data = {}; fieldControllers.forEach((key, controller) { data[key] = controller.text; print('$key，${controller.text}'); }); // 如果需要自定义字段 data['remark'] = remarkController.text; // 转换为 JSON String jsonData = jsonEncode(data); print('jsonData = $jsonData'); }

3、动态渲染表单页面

// 表单 Widget _buildForm() { return GetBuilder<StrategyAddController>( id: "strategy_model", builder: (_) { return <Widget>[ controller.selectedModel == null ? const Center(child: Text('请选择一个模型')) : <Widget>[ ...controller.selectedModel!.ctaVal.entries.map((item) { // 获取或创建控制器 final controllerKey = item.key; if (!controller.fieldControllers.containsKey(controllerKey)) { controller.fieldControllers[controllerKey] = TextEditingController(text: item.value['val']); } final fieldController = controller.fieldControllers[controllerKey]; return <Widget>[ InputWidget( prefix: TextWidget.body( item.value['title'], ), placeholder: item.value['read'] == '1' ? "" : '请输入${item.value['title']}', controller:fieldController, readOnly: item.value['read'] == '1' ? true : false, ).expanded(), TextWidget.body( item.value['unit'], ), ].toRow(crossAxisAlignment: CrossAxisAlignment.center).opacity(item.value['read'] == '1' ? 0.5 : 1); }), ].toColumn(crossAxisAlignment: CrossAxisAlignment.start) ].toColumn(); }, ); }

...controller.selectedModel!.ctaVal.entries.map((item) => ...) 会遍历 ctaVal 中的每个条目，并将其映射为一个新的 Widget 列表。 每个 item 是一个 MapEntry，可以通过 item.key 和 item.value 访问键和值。 这种方式非常适合动态生成 UI 组件，特别是在字段数量和内容不确定的情况下。