随州网站建站,ie9网站后台编辑器,wordpress媒体库播放器,seo网站标题关于数据模型#xff1a;模型就是一种规范约束#xff0c;便于维护管理#xff0c;在不确定表单内会出现什么数据时#xff0c;就没有模型一说。 这时就要用到动态表单#xff08;根据接口返回的字段#xff0c;生成动态表单#xff09; 1、观察数据格式#xff0c;定义…关于数据模型模型就是一种规范约束便于维护管理在不确定表单内会出现什么数据时就没有模型一说。 这时就要用到动态表单根据接口返回的字段生成动态表单 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 MapString, dynamic ctaVal;class DynamicFormModel {int? id;String? name;final MapString, dynamic ctaVal;DynamicFormModel ({required this.id,required this.name,required this.ctaVal,});factory DynamicFormModel .fromJson(MapString, dynamic json) {return StrategyListModel(id: json[id] as int?,name: json[name] as String?,ctaVal: json[ctaVal] ?? {},);}MapString, dynamic toJson() {id: id,name: name,ctaVal: ctaVal,};
} 2、接口处理请求数据 // 模型列表
ListDynamicFormModel modelList [];
// 当前选中的模型id
int modelId 0;
// 当前选中的模型
DynamicFormModel? selectedModel;
// 动态表单控制器
final MapString, TextEditingController fieldControllers {};overridevoid 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_usdtMapString, String data {};fieldControllers.forEach((key, controller) {data[key] controller.text;print($key${controller.text});});// 如果需要自定义字段 data[remark] remarkController.text;// 转换为 JSONString jsonData jsonEncode(data);print(jsonData $jsonData);
} 3、动态渲染表单页面 // 表单
Widget _buildForm() {return GetBuilderStrategyAddController(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 组件特别是在字段数量和内容不确定的情况下。
