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 = {};@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.keyitem.value 访问键和值。
这种方式非常适合动态生成 UI 组件,特别是在字段数量和内容不确定的情况下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/71244.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷P8707 [蓝桥杯 2020 省 AB1] 走方格

#include <iostream> using namespace std; int f[31][31]; int main(){int n,m;scanf("%d%d",&n,&m);f[1][1]1;//边界&#xff1a;f(1,1)1for(int i1;i<n;i)for(int j1;j<m;j)if((i&1||j&1)&&(i!1||j!1))//i,j不均为偶数&#…

ASP.NET Core Web应用(.NET9.0)读取数据库表记录并显示到页面

1.创建ASP.NET Core Web应用 选择.NET9.0框架 安装SqlClient依赖包 2.实现数据库记录读取: 引用数据库操作类命名空间 创建查询记录结构类 查询数据并返回数据集合 3.前端遍历数据并动态生成表格显示 生成结果:

解决 Linux 中搜狗输入法导致系统崩溃的问题【fcitx 】【ibus】

在 Linux 系统中安装搜狗输入法时&#xff0c;有时会遇到一些令人头疼的问题。最近&#xff0c;我在安装搜狗输入法后&#xff0c;系统出现了崩溃的情况。具体表现为输入密码登录后&#xff0c;界面卡死&#xff0c;无法正常进入系统。经过一番排查和分析&#xff0c;我终于找到…

如何做好项目变更管理

项目变更管理是确保项目按时、按预算和按质量要求完成的关键环节之一。有效的项目变更管理包括&#xff1a;变更识别、变更评审、变更批准和变更实施。这些步骤确保项目在面对变化时能够高效应对&#xff0c;避免资源浪费、时间延误和预算超支。其中&#xff0c;变更评审和变更…

HarmonyOS-ArkTS基础快速入门

目录 ArkTS 快速入门 ArkTS 快速入门 如图&#xff0c;index.etc里面的内容&#xff08;图中框住的大长方形区域&#xff09;会渲染到预览区中&#xff0c;而console.log(xx,xxx)用于内容的打印&#xff0c;需要在日志中查看打印的内容

【设计模式】【结构型模式】桥接模式(Bridge)

&#x1f44b;hi&#xff0c;我不是一名外包公司的员工&#xff0c;也不会偷吃茶水间的零食&#xff0c;我的梦想是能写高端CRUD &#x1f525; 2025本人正在沉淀中… 博客更新速度 &#x1f44d; 欢迎点赞、收藏、关注&#xff0c;跟上我的更新节奏 &#x1f3b5; 当你的天空突…

深度学习(1)-简单神经网络示例

我们来看一个神经网络的具体实例&#xff1a;使用Python的Keras库来学习手写数字分类。在这个例子中&#xff0c;我们要解决的问题是&#xff0c;将手写数字的灰度图像&#xff08;28像素28像素&#xff09;划分到10个类别中&#xff08;从0到9&#xff09;​。我们将使用MNIST…

深入探索 C++17 中的 std::hypot:从二维到三维的欧几里得距离计算

文章目录 1. std::hypot 的起源与背景2. 三维空间中的 std::hypot3. 为什么需要 std::hypot 而不是手动计算&#xff1f;4. 使用 std::hypot 的示例4.1 二维空间中的应用4.2 三维空间中的应用4.3 处理浮点数溢出问题 5. std::hypot 的性能与精度6. 实际应用场景6.1 计算机图形学…

面基Spring Boot项目中实用注解一

在Spring Boot项目中&#xff0c;实用注解根据功能可以分为多个类别。以下是常见的注解分类、示例说明及对比分析&#xff1a; 1. 核心配置注解 SpringBootApplication 作用&#xff1a;标记主启动类&#xff0c;组合了Configuration、EnableAutoConfiguration和ComponentScan…

【每日论文】Latent Radiance Fields with 3D-aware 2D Representations

下载论文或阅读原文&#xff0c;请点击&#xff1a;每日论文 摘要 中文 潜在3D重建技术在赋予3D语义理解和3D生成能力方面展现出巨大的潜力&#xff0c;它通过将2D特征提炼到3D空间来实现。然而&#xff0c;现有的方法在2D特征空间和3D表示之间的领域差距问题上挣扎&#xff…

CPP集群聊天服务器开发实践(七):Github上传项目

github链接&#xff1a;GitHub - arduino-ctrl/ClusterServer: 基于jsonmuduomysqlnginxredis的集群服务器与客户端通信源码 步骤如下&#xff1a; 1. github新建代码仓库&#xff0c;复制url 2. git clone https://github.com/arduino-ctrl/ClusterServer.git 3. 将项目文件…

作业。。。。。

顺序表按元素删除 参数&#xff1a;删除元素&#xff0c;顺序表 1.调用元素查找的函数 4.根据下表删除 delete_sub(list,sub); //删除元素 void delete_element(int element, Sqlist *list) …

二、从0开始卷出一个新项目之瑞萨RZT2M双核架构通信和工程构建

一、概述 RZT2M双核架构是同构多核&#xff0c;但双核针对不同应用 扩展多核架构和通信知识可参见嵌入式科普(30)一文看懂嵌入式MCU/MPU多核架构与通信 二、参考资料 用户手册&#xff1a;RZ/T2M Group Users Manual: Hardware R52内核手册&#xff1a;arm_cortex_r52_proc…

【HF设计模式】07-适配器模式 外观模式

声明&#xff1a;仅为个人学习总结&#xff0c;还请批判性查看&#xff0c;如有不同观点&#xff0c;欢迎交流。 摘要 《Head First设计模式》第7章笔记&#xff1a;结合示例应用和代码&#xff0c;介绍适配器模式和外观模式&#xff0c;包括遇到的问题、采用的解决方案、遵循…

RDMA 高性能通信技术原理

目录 文章目录 目录DMA 与 RDMARDMA 特性和优势大带宽低延时 RDMA 协议栈标准RDMA 运行原理通信通路通信模型通信方式内存注册QP 建链常规流程双向控制 Send-Receive API 流程单向数据 Write API 流程单向数据 Read API 流程 RDMA Verbs API 编程基础网络连通性RDMA C/S 程序 D…

HCIA项目实践(网络)---NAT地址转化技术

十三 NAT网络地址转换技术 13.1 什么是NAT NAT&#xff08;Network Address Translation&#xff09;地址转换技术&#xff0c;是一种将内部网络的私有 IP 地址转换为外部网络的公有 IP 地址的技术。其主要作用是实现多个内部网络设备通过一个公有 IP 地址访问外部网络&#x…

【JAVA工程师从0开始学AI】,第四步:闭包与高阶函数——用Python的“魔法函数“重构Java思维

副标题&#xff1a;当严谨的Java遇上"七十二变"的Python函数式编程 历经变量战争、语法迷雾、函数对决&#xff0c;此刻我们将踏入Python最迷人的领域——函数式编程。当Java工程师还在用接口和匿名类实现回调时&#xff0c;Python的闭包已化身"智能机器人"…

el-tree选中数据重组成树

vueelement-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树&#xff0c;效果如下 <template><div class"flex"><el-tree class"tree-row" :data"list" ref"tree" :props"{children: children, label: …

测试常见问题汇总-检查表(持续完善)

WEB页面常见的问题 按钮功能的实现&#xff1a;返回按钮是否可以正常返回 信息保存提交后&#xff0c;系统是否给出“成功”的提示信息&#xff0c;列表数据是否自动刷新 没有勾选任何记录直接点【删除】&#xff0c;是否给出“请先选择记录”的提示 删除是否有删除确认框 …

java后端开发day16--字符串(二)

&#xff08;以下内容全部来自上述课程&#xff09; 1.StringBuilder 因为StringBuilder是Java已经写好的类。 java在底层对他进行了一些特殊处理。 打印对象不是地址值而是属性值。 1.概述 StringBuilder可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。 作用…