网站建设 dw 时间轴网站开发新加坡

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

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 = {};@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_usdt）Map<String, 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 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 组件，特别是在字段数量和内容不确定的情况下。