当前位置: 首页 > news >正文

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 组件,特别是在字段数量和内容不确定的情况下。

相关文章:

Flutter:动态表单(在不确定字段的情况下,生成动态表单)

关于数据模型&#xff1a;模型就是一种规范约束&#xff0c;便于维护管理&#xff0c;在不确定表单内会出现什么数据时&#xff0c;就没有模型一说。 这时就要用到动态表单&#xff08;根据接口返回的字段&#xff0c;生成动态表单&#xff09; 1、观察数据格式&#xff0c;定义…...

Redis存在线程安全问题吗?

Redis本身在其单线程模型下是线程安全的&#xff0c;但在特定应用场景下&#xff0c;仍可能面临线程安全相关的挑战。以下是对Redis线程安全性的详细讲解&#xff1a; Redis线程安全的基础 单线程模型&#xff1a; Redis采用单线程模型来处理客户端的请求。这意味着&#xff0…...

Maven 与 Kubernetes 部署:构建和部署到 Kubernetes 环境中

在现代的 DevOps 实践中&#xff0c;Kubernetes 被广泛用于容器化应用的自动化部署、扩展和管理。而 Maven 是 Java 项目中常用的构建工具&#xff0c;通常用于依赖管理、构建、打包等任务。在许多项目中&#xff0c;Maven 和 Kubernetes 可以结合起来&#xff0c;完成 容器化构…...

与本地电脑PDF文档对话的PDF问答程序

文章目录 PDF问答程序程序流程处理PDF文档创建问答链 在探索和学习新技术时&#xff0c;了解LangChain框架的理论知识固然重要&#xff0c;但实际的案例分析与实践尝试能为你提供更加直观的认识和更深人的理解。本文主要以解析案例代码为主。通过具体的实践操作&#xff0c;你可…...

什么是uniapi

“UniAPI”有两种不同的含义&#xff0c;具体取决于上下文&#xff1a; 1. uni-app 的 API uni-app 是一个基于 Vue.js 的跨平台应用开发框架&#xff0c;允许开发者编写一套代码并发布到 iOS、Android、Web、以及各种小程序等多个平台。uni-app 的 API 是其核心功能之一&…...

网络运维学习笔记 012网工初级(HCIA-Datacom与CCNA-EI)某机构新增:GRE隧道与EBGP实施

文章目录 GRE隧道&#xff08;通用路由封装&#xff0c;Generic Routing Encapsulation&#xff09;协议号47实验&#xff1a;思科&#xff1a;开始实施&#xff1a; 华为&#xff1a;开始实施&#xff1a; eBGP实施思科&#xff1a;华为&#xff1a; GRE隧道&#xff08;通用路…...

Spring MVC 的核心以及执行流程

Spring MVC的核心 Spring MVC是Spring框架中的一个重要模块&#xff0c;它采用了经典的MVC&#xff08;Model-View-Controller&#xff09;设计模式。 MVC是一种软件架构的思想&#xff0c;它将软件按照模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;…...

vue单据打印 一维码、二维码实现

编码规则与 JavaScript 代码实现 编码规则数组&#xff1a;定义了 Code 128 条形码编码规则数组 BARS&#xff0c;其中每个数字对应一种条形码的线条组合模式。 const BARS [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,12…...

01数据准备 抓取图片 通过爬虫方式获取bing的关键词搜索图片

为了获取训练所需的图片,我们最常用的手段就是自己去写一个爬虫去获取相关图片。本文将重点围绕如何采用爬虫的方式获取训练所需的图片素材进行讲解,为了大家能够够直观的掌握相关技术,参考本文的相关过程和代码获取自己的数据图片素材,笔者将详细介绍实现过程。 1、确定图…...

智能马达保护器:为工业电机安全运行保驾护航

在工业生产中&#xff0c;电动机作为核心动力设备&#xff0c;其稳定运行直接关系到生产效率与安全性。然而&#xff0c;复杂的工况环境、频繁启停和突发负载变化&#xff0c;常导致电机面临过载、缺相、短路等故障风险。安科瑞智能马达保护器凭借其智能化、高精度、多功能的设…...

Wireshark使用介绍

文章目录 Wireshark介绍Wireshark使用工作模式介绍1. 混杂模式&#xff08;Promiscuous Mode&#xff09;2. 普通模式&#xff08;Normal Mode&#xff09;3. 监视模式&#xff08;Monitor Mode&#xff09; 界面分区捕获过滤器语法基本语法逻辑运算符高级语法使用示例捕获过滤…...

DeepSeek操作Excel,实现图表自动化生成

案例 让DeepSeek操作Excel&#xff0c;实现图表自动化生成。我们只要用自然语言输入我们的需求&#xff08;根据哪块单元格区域做什么图表&#xff09;&#xff0c;就可以直接在Excel中自动生成图表。 操作主界面和图表效果 设置接入方式 这里提供了多种接入方式将DeepSeek接…...

【分布式理论13】分布式存储:数据存储难题与解决之道

文章目录 一、数据存储面临的问题二、RAID磁盘阵列的解决方案1. RAID概述2. RAID使用的技术3. RAID的代表性等级 三、分布式存储的新思路1. 分布式存储背景与特点2. 分布式存储的组成要素 一、数据存储面临的问题 在单机系统时代&#xff0c;当数据量不断增加、硬盘空间不够时…...

C++笔记之标准库中的std::copy 和 std::assign 作用于 std::vector

C++笔记之标准库中的std::copy 和 std::assign 作用于 std::vector code review! 文章目录 C++笔记之标准库中的std::copy 和 std::assign 作用于 std::vector1. `std::copy`1.1.用法1.2.示例2.`std::vector::assign`2.1.用法2.2.示例3.区别总结4.支持assign的容器和不支持ass…...

AWS云从业者认证题库 AWS Cloud Practitioner

题库持续更新&#xff0c;上方二维码查看完整题库&#xff01; 在分担责任模型下&#xff0c;客户对以下哪项负责? A&#xff1a;确保在使用后擦除磁盘驱动器 B&#xff1a;确保在硬件设备上更新固件 C&#xff1a;确保静态数据已加密 D&#xff1a;确保网线为六类或更高类…...

ubuntu20.04重启后不显示共享文件夹

ubuntu20.04重启后不显示共享文件夹 主要参见这两篇博客 Ubuntu重启后不显示共享文件夹_ubuntu 20.04 共享目录无法使用-CSDN博客 ubuntu22.04 配置共享文件夹 找不到/mnt/hgfs_ubuntu安装tools 后mnt文件夹在哪-CSDN博客 重启Ubuntu20.04后&#xff0c;发现共享文件夹进不去…...

C++ 课程设计 汇总(含源码)

C 课程设计 [C课程设计 个人账务管理系统(含源码)](https://arv000.blog.csdn.net/article/details/145601695)[C课程设计 运动会分数统计&#xff08;含源码&#xff09;](https://arv000.blog.csdn.net/article/details/145601819)[C 课程设计打印万年历&#xff08;含源码&a…...

STC 51单片机63——关于STC8H的ADC通道切换问题

使用STC8H时&#xff0c;发现在ADC中断中只能使用一个通道&#xff0c;即使切换了通道&#xff0c;那么数据要不为0&#xff0c;要不就是原先通道的电压。查阅手册&#xff0c;内容并不多&#xff0c;没有发现专门提到的问题。只能去试试&#xff0c;最后发现在ADC中断中&#…...

【前端框架】Vue3 面试题深度解析

本文详细讲解了VUE3相关的面试题&#xff0c;从基础到进阶到高级&#xff0c;分别都有涉及&#xff0c;希望对你有所帮助&#xff01; 基础题目 1. 简述 Vue3 与 Vue2 相比有哪些主要变化&#xff1f; 答案&#xff1a; 响应式系统&#xff1a;Vue2 使用 Object.definePrope…...

数据结构——模拟栈例题B3619

B3619 10 进制转 x 进制 - 洛谷 #include <bits/stdc.h>using namespace std; #define fs first #define sc second #define endl \n #define all(x) x.begin(), x.end() typedef long long ll; typedef pair<int, int> PII;char a[40];void solve(){int n,x;cin&g…...

Web自动化之Selenium 超详细教程(python)

Selenium是一个开源的基于WebDriver实现的自动化测试工具。WebDriver提供了一套完整的API来控制浏览器&#xff0c;模拟用户的各种操作&#xff0c;如点击、输入文本、获取页面元素等。通过Selenium&#xff0c;我们可以编写自动化脚本&#xff0c;实现网页的自动化测试、数据采…...

物联网简介集合

物联网&#xff08;IoT&#xff09;指的是物理设备&#xff08;如电器和车辆&#xff09;之间的互联互通。这些设备嵌入了软件、传感器和连接功能&#xff0c;使其能够相互连接并交换数据。这项技术实现了从庞大的设备网络中收集和共享数据&#xff0c;为打造更高效、自动化的系…...

【设计模式精讲】结构型模式之代理模式(静态代理、JDK动态代理、cglib动态代理)

文章目录 第五章 结构型模式5.1 代理模式5.1.1 代理模式介绍5.1.2 代理模式原理5.1.3 静态代理实现5.1.4 JDK动态代理5.1.4.1 JDK动态代理实现5.1.4.2 类是如何动态生成的5.1.4.3 代理类的调用过程 5.1.5 cglib动态代理5.1.5.1 cglib动态代理实现5.1.5.2 cglib代理流程 5.1.6 代…...

node 使用 Redis 缓存

缓存是什么&#xff1f; 高并发下&#xff0c;一个项目最先出问题的&#xff0c;并不是程序本身&#xff0c;而是数据库最先承受不住。 在数据库上我们可以做很多优化&#xff0c;例如优化 SQL 语句&#xff0c;优化索引&#xff0c;如果数据量大了&#xff0c;还可以分库、分表…...

nginx反向代理负载均衡

反向代理原理&#xff1a; 反向代理服务器架设在服务器端&#xff0c;通过缓冲经常被请求的页面来缓解服务器的工作量&#xff0c;将客户机请求 转发给内部网络上的目标服务器&#xff1b;并将从服务器上得到的结果返回给Internet上请求连接的客户端&#xff0c;此 时代理服务…...

国产编辑器EverEdit - 独门暗器:自动监视剪贴板内容

1 监视剪贴板 1.1 应用场景 如果需要对剪贴板的所有历史进行记录&#xff0c;并进行分析和回顾&#xff0c;则可以使用监视剪贴板功能&#xff0c;不仅在EverEdit中的复制会记录&#xff0c;在其他应用的复制也会记录。 1.2 使用方法 新建一个空文档(重要&#xff1a;防止扰乱…...

AI全栈开发_人工智能AI大模型 Prompt提示词工程详解(全方位介绍及运用)

AI引领的第四次工业革命正席卷而来&#xff0c;如何精准把握这一历史性的机遇&#xff0c;将成为我们这一代人不容忽视且需深入思考与积极行动的重要课题。未来几年AI将会像计算机一样快速普及&#xff0c;面对这一历史性的第一波红利&#xff0c;你是否已准备好把握机遇&#…...

PHP图书借阅小程序源码

&#x1f4da; 图书借阅小程序&#xff1a;一键开启智慧阅读新篇章 &#x1f31f; 这是一款由ThinkPHP与UniApp两大技术巨擘强强联手精心打造的图书借阅微信小程序&#xff0c;它犹如一座随身携带的移动图书馆&#xff0c;让您无论身处何地都能轻松畅游知识的海洋。创新的多书…...

sourcetree gitee 详细使用

SSH 公钥设置 | Gitee 帮助中心 先配置公钥&#xff0c;输入gitee密码完成验证 gitee仓库创建完成 打开sourcetree 如果你本地有项目&#xff08;vite &#xff09;需要 git init 在设置中完成远程仓库的添加 &#xff08;ssh ,https) 直接提交推送&#xff0c;完成后&#xf…...

Hive JOIN过滤条件位置玄学:ON vs WHERE的量子纠缠

Hive JOIN过滤条件位置玄学:ON vs WHERE的量子纠缠 作为数据工程师,Hive JOIN就像吃火锅选蘸料——放错位置味道全变!今天带你破解字节/阿里等大厂高频面试题:ON和WHERE后的过滤条件究竟有什么不同? 一、核心差异对比表 特性ON子句WHERE子句执行时机JOIN操作时JOIN完成后…...

破局与重构:水务企业数字化转型路径探索

随着数字化技术的发展和智慧城市建设进程的推进&#xff0c;水务行业正经历以数据为驱动的深刻变革。本文深入探讨水务行业数字化发展的趋势、水务企业数字化转型的痛点、水务行业标杆企业数字化转型实践以及水务企业数字化转型的方向和路径&#xff0c;为水务企业十五五期间把…...

stm32hal库寻迹+蓝牙智能车(STM32F103C8T6)

简介: 这个小车的芯片是STM32F103C8T6&#xff0c;其他的芯片也可以照猫画虎,基本配置差不多,要注意的就是,管脚复用,管脚的特殊功能,(这点不用担心,hal库每个管脚的功能都会给你罗列,很方便的.)由于我做的比较简单,只是用到了几个简单外设.主要是由带霍尔编码器电机的车模,电机…...

云服务中的“高可用性架构”是怎样的?

在云计算中&#xff0c;“高可用性架构”&#xff08;High Availability Architecture&#xff0c;简称HA架构&#xff09;是指通过设计和配置&#xff0c;使得系统、服务或应用能够在发生硬件故障、软件故障、网络问题等情况下&#xff0c;依然保持正常运行&#xff0c;最大程…...

StableDiffusion+ComfyUI

一、AI、AIGC、AIAgent基本概念 图形生成大模型&#xff1a;StableDiffusion(逼真&#xff0c;开源)、Midjourney(艺术性&#xff0c;商业)、FLUX(复杂场景&#xff0c;开源商业)工作流程构建工具&#xff1a;ComfyUI智能体&#xff1a;COZE、Dify、FastGPTAI视频编辑工具&…...

MATLAB基础学习相关知识

MATLAB安装参考&#xff1a;抖音-记录美好生活 MATLAB基础知识学习参考&#xff1a;【1小时Matlab速成教程-哔哩哔哩】 https://b23.tv/CnvHtO3 第1部分&#xff1a;变量定义和基本运算 生成矩阵&#xff1a; % 生成矩阵% 直接法% ,表示行 ;表示列 a [1,2,3;4,5,6;7,8,9];%…...

设计模式 之 工厂模式(简单工厂模式、工厂方法模式、抽象工厂模式)(C++)

文章目录 C 工厂模式引言一、简单工厂模式概念实现步骤示例代码优缺点 二、工厂方法模式概念实现步骤示例代码优缺点 三、抽象工厂模式概念实现步骤示例代码优缺点 C 工厂模式 引言 在 C 编程中&#xff0c;对象的创建是一个常见且基础的操作。然而&#xff0c;当项目规模逐渐…...

windows下docker使用笔记

目录 镜像的配置 镜像的拉取 推荐镜像源列表&#xff08;截至2025年2月测试有效&#xff09; 配置方法 修改容器名字 如何使用卷 创建不同的容器&#xff0c;每个容器中有不同的mysql和java版本&#xff08;不推荐&#xff09; 1. 安装 Docker Desktop&#xff08;Win…...

SQLMesh 系列教程6- 详解 Python 模型

本文将介绍 SQLMesh 的 Python 模型&#xff0c;探讨其定义、优势及在企业业务场景中的应用。SQLMesh 不仅支持 SQL 模型&#xff0c;还允许通过 Python 编写数据模型&#xff0c;提供更高的灵活性和可编程性。我们将通过一个电商平台的实例&#xff0c;展示如何使用 Python 模…...

【时时三省】(C语言基础)用N-S流程图表示算法

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 N-S流程图 既然用基本结构的顺序组合可以表示任何复杂的算法结构&#xff0c;那么&#xff0c;基本结构之间的流程线就是多余的了。1973年&#xff0c;美国学者I.Nassi和B .Shneiderman提出…...

【HarmonyOS Next】鸿蒙监听手机按键

【HarmonyOS Next】鸿蒙监听手机按键 一、前言 应用开发中我们会遇到监听用户实体按键&#xff0c;或者扩展按键的需求。亦或者是在某些场景下&#xff0c;禁止用户按下某些按键的业务需求。 这两种需求&#xff0c;鸿蒙都提供了对应的监听事件进行处理。 onKeyEvent 默认的…...

Unreal5从入门到精通之在编辑器中更新 UserWidgets

前言 在虚幻中创建越来越复杂和灵活的 UserWidget 蓝图时,一个问题是它们在编辑器中的外观与它们在游戏中的最终外观可能有很大不同。 库存面板示例 假设你想创建一个通用的库存显示小部件。我们可以在整个 UI 中使用它,无论我们需要在哪里显示某些内容。 标题,描述所显示…...

Django 5实用指南(五)模板系统

Django5的模板系统是其核心功能之一&#xff0c;允许开发者将动态数据嵌入到HTML模板中&#xff0c;并根据不同的业务需求渲染页面。Django模板系统基于 Django模板语言&#xff08;DTL&#xff09;&#xff0c;它提供了一些强大的功能&#xff0c;如模板标签、过滤器、条件语句…...

游戏引擎学习第114天

打开内容并回顾 目前正在讨论一个非常重要的话题——优化。当代码运行太慢&#xff0c;无法达到所需性能时&#xff0c;我们该怎么办。昨天&#xff0c;我们通过在代码中添加性能计数器&#xff0c;验证了一些性能分析的数据&#xff0c;这些计数器帮助我们了解每个操作需要的…...

Python 赋能 AI:从零实现图像分类

人工智能(AI)热度持续攀升,而 Python 作为 AI 开发的利器,以其简洁易学、生态丰富的特点,成为众多开发者的首选。本文以图像分类为例,带你用 Python 实现一个简单的 AI 模型。 1. 环境准备 首先,我们需要安装一些必要的 Python 库: pip install tensorflow keras nu…...

UE引擎游戏加固方案解析

据VGinsights的报告&#xff0c;近年来UE引擎在过去几年中市场占比显著增长&#xff0c;其中亚洲市场增幅达到了30%&#xff0c;随着UE5的推出和技术的不断进步&#xff0c;UE引擎在独立开发者和移动游戏开发中的应用也在逐步增加。 UE引擎的优势在于强大的画面表现与视觉特效…...

Http升级为Https - 开发/测试服环境

1.应用场景 主要用于开发/测试服环境将http升级为https, 防止前端web(浏览器)出现Mixed Content报错; 2.学习/操作 1.文档阅读 deepseek 问答; 2.整理输出 报错信息: Mixed Content: The page at <URL> was loaded over HTTPS, but requested an insecure XMLHttpRequ…...

SaaS系统租户隔离方案分析:基于域名与请求头的比较

在设计SaaS系统时&#xff0c;租户隔离是非常重要的设计考虑因素。租户隔离的方式决定了系统的可扩展性、安全性和维护性。常见的租户隔离方案包括基于域名和基于**请求头&#xff08;header&#xff09;**的隔离方式。每种方式都有其优缺点&#xff0c;具体选择应根据系统的需…...

调用click.getchar()时Windows PyCharm无法模拟键盘输入

文章目录 问题描述解决方案参考文献 问题描述 调用 click.getchar() 时&#xff0c;Windows PyCharm 无法模拟键盘输入 解决方案 Run → Edit Configurations… → Modify options → Emulate terminal in output console 参考文献 Terminal emulator | PyCharm Documentati…...

科普:“docker”与“docker compose”

一、安装Docker Desktop 安装Docker Desktop&#xff0c;则既安装了Docker&#xff0c;也安装了Docker Compose 从Docker Desktop官方下载页面(https://www.docker.com/products/docker-desktop/)&#xff0c;选择适合Windows系统的版本进行下载安装。 验证&#xff1a; do…...

Windows 快速搭建C++开发环境,安装C++、CMake、QT、Visual Studio、Setup Factory

安装C 简介 Windows 版的 GCC 有三个选择&#xff1a; CygwinMinGWmingw-w64 Cygwin、MinGW 和 mingw-w64 都是在 Windows 操作系统上运行的工具集&#xff0c;用于在 Windows 环境下进行开发和编译。 Cygwin 是一个在 Windows 上运行的开源项目&#xff0c;旨在提供类Uni…...