首页/新闻资讯/正文详情

【鸿蒙心迹】HarmonyOS笔记20:列表点击与事件处理

发布时间:2026/11/4 2:14:05 来源:云帆数科 栏目:资讯中心
【鸿蒙心迹】HarmonyOS笔记20:列表点击与事件处理
个人主页杨利杰YJlio❄️个人专栏《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》《超简单用Python让Excel飞起来》让复杂的事情更简单让重复的工作自动化文章目录一、先认清两条示例数据二、把点击事件放在对应的行上三、点击回调读取当前行的 ticket四、用观察状态呈现选择反馈五、点哪一行反馈就应对应哪一条六、行位置、显示标题与业务标识分别看七、显示不对时沿事件路径排查八、留下点击对象与结果的真实记录写在最后参考资料大家好我是杨利杰 YJlio。原稿里已经有两条工单标题和 ForEach 展示代码。这一节我保留这两条示例数据补上行点击回调再用一段“当前选择”文字反馈结果先把点击路径看清楚。本篇编号 020计划日期为 2026 年 10 月 10 日。原稿已保留补充代码属于学习示例未执行本机编译或设备实测。配图均为概念示意。一、先认清两条示例数据tickets 包含“网络无法连接”和“打印机驱动安装”。它们是演示字符串不能当作真实工单或现场故障记录。本次只检查这两条文字不增加删除、提交或跳转操作。这样出现差异时可以先把问题缩小到行数据、事件和反馈三个位置。二、把点击事件放在对应的行上我沿用原稿的 Column 与 ForEach通过 Text 展示每条 ticket并在该 Text 上绑定 onClick。这里的“列表”是两条循环生成的文本行并没有使用 List 与 ListItem 组件。完整的最小学习示例如下EntryComponentstruct Index{Statetickets:string[][网络无法连接,打印机驱动安装];StateselectedTicket:string未选择;build(){Column({space:12}){Text(当前选择${this.selectedTicket})ForEach(this.tickets,(ticket:string){Text(ticket).width(100%).padding(12).onClick((){this.selectedTicketticket})},(ticket:string)ticket)}.width(100%).padding(16)}}代码使用 V1 的 Component 与 State。如果当前工程采用其他状态管理模板应先适配再编译。学习系列名称不构成任何 SDK 版本实测证据。三、点击回调读取当前行的 ticketForEach 为每条数据构建 Text。回调中的 ticket 来自这一行的构建参数所以两行各自关联自己的内容。onClick 接收的是点击时执行的函数。本例在回调里给 selectedTicket 赋值不在页面构建过程中提前修改它。事件绑定、当前行数据和回调中的赋值应沿同一条路径对应起来。如果后续改成对象数据我会让事件接收当前记录或稳定标识再由处理函数完成业务操作避免靠页面文字猜是哪条记录。四、用观察状态呈现选择反馈selectedTicket 初始为“未选择”。页面顶部 Text 读取该字段显示“当前选择未选择”。点击某行后回调更新 selectedTicket依赖它的文字按状态规则更新。这里使用 State 表达组件内状态没有弹窗、选中高亮或持久化行为。本例保留一个反馈位置因此每次点击都会替换当前选择。这是单条反馈练习不是多选列表。五、点哪一行反馈就应对应哪一条我把预期结果写成两组对应关系再到真实工程里逐项验证点击对象按代码逻辑预期显示网络无法连接当前选择网络无法连接打印机驱动安装当前选择打印机驱动安装先点击第一行再点击第二行再返回第一行可以观察反馈是否随当前点击变化。重复点击同一行时赋值内容可能没有变化文字保持相同并不直接说明事件未触发。事件有没有执行与显示内容有没有变化需要分别观察。六、行位置、显示标题与业务标识分别看示例使用 ticket 字符串生成 ForEach 的 key因为这两条字符串不同且本次不修改它们。官方文档要求键值能正确区分对应元素重复键可能造成非预期渲染。真实工单可能具有相同标题标题也可能被修改。因此不能把本例的简化规则直接套到业务列表。应使用适合当前数据的稳定唯一标识并让点击操作识别同一条记录。数组位置表示“现在排在第几行”并不天然等于业务记录身份。插入、删除和排序后位置可能变化。七、显示不对时沿事件路径排查我准备按四个位置逐步观察onClick 是否触发、ticket 是否属于当前行、selectedTicket 是否更新、Text 是否读取该字段。如果点击没有反应再检查事件绑定位置、可点击区域以及是否有其他组件遮挡。本例为 Text 设置宽度与内边距真实设备上的触摸表现仍要结合布局验证不能仅凭图判断。暂时不加网络、路由或数据提交可以减少干扰。后续增加业务操作时再处理重复触发、取消和失败反馈避免把当前的文字赋值当作完整业务流程。八、留下点击对象与结果的真实记录核验项预期或需记录内容当前状态工具与运行环境DevEco Studio、SDK/API、设备、窗口待填写初次显示当前选择未选择待实际验证点击第一行当前选择网络无法连接待实际验证点击第二行当前选择打印机驱动安装待实际验证返回第一行再次反馈第一行文字待实际验证重复点击分别检查事件执行与文字是否变化待实际验证遇到错误时我会保留编译诊断、点击顺序及修改差异。运行截图应来自自己的练习工程不能用这组概念图代替设备证据。预期结果指导验证实际结果必须来自真实工程记录。写在最后这节我在原稿的两行展示基础上补了一条明确的交互路径点击当前行读取 ticket更新 selectedTicket再由 Text 显示反馈。下一篇继续学习页面路由与页面跳转。先确认能识别点击的是哪条数据再把它带到另一个页面排查时更容易分清事件问题和路由问题。参考资料OpenHarmony 官方文档ForEach 循环渲染用于核对循环构建与键值概念。OpenHarmony 官方文档点击事件用于核对事件接口实际 HarmonyOS 工程请以对应 SDK 文档为准。本系列第 020 篇原稿《列表点击与事件处理》计划日期 2026-10-10。声明本文为个人学习笔记工单标题是演示数据代码与配图用于说明交互关系尚无本机编译或设备实测记录。返回顶部

相关推荐

Windows 驱动管理一篇讲透:Driver Store Explorer 到底怎么用
Windows 驱动管理一篇讲透:Driver Store Explorer 到底怎么用

Windows 驱动管理一篇讲透:Driver Store Explorer 到底怎么用 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 上次重装系统,刚装完网卡就识别不了,只… · 2026/11/4 2:13:04

Zotero PDF Translate 完整配置:三步跑通,五个开关让划词翻译顺起来
Zotero PDF Translate 完整配置:三步跑通,五个开关让划词翻译顺起来

Zotero PDF Translate 完整配置:三步跑通,五个开关让划词翻译顺起来 【免费下载链接】zotero-pdf-translate Translate PDF, EPub, webpage, metadata, annotations, notes to the target language. Support 20 translate services. 项目地址: https:/… · 2026/11/4 2:13:04

Eglantine 调试指南:GDB Stub、RenderDoc 图形调试与日志分析实战
Eglantine 调试指南:GDB Stub、RenderDoc 图形调试与日志分析实战

【免费下载链接】Eglantine VERY experimental Nintendo Switch 2 emulator 项目地址: https://gitcode.com/gh_mirrors/eg/Eglantine 点击查看 免费下载 🐛 Eglantine 是一款开源的 Nintendo Switch 2 模拟器。当游戏出现崩溃、黑屏、画面错乱时&#… · 2026/11/4 2:13:04

PostgreSQL主从流复制+pgpool高可用实战指南
PostgreSQL主从流复制+pgpool高可用实战指南

简介:本资源是一份面向数据库运维工程师与PostgreSQL高可用架构实践者的完整技术方案文档,聚焦Postgres主从流复制与pgpool-II协同构建生产级高可用数据库集群。内容系统覆盖流复制原理(WAL日志实时同步、同步/异步模式对比)、pgp… · 2026/11/4 23:18:44

机器学习算法优化与硬件协同设计的效率革命
机器学习算法优化与硬件协同设计的效率革命

1. 机器学习效率革命的背后推手在波士顿查尔斯河畔的那栋标志性玻璃建筑里,一群穿着连帽衫的研究人员正用数学公式重新定义人工智能的边界。他们最近发表在NeurIPS上的论文显示,通过改进传统反向传播算法,模型训练时间缩短了40%——这相当于每… · 2026/11/4 23:18:44

Redis SCAN命令原理与华为云优化实践
Redis SCAN命令原理与华为云优化实践

1. Redis SCAN命令基础解析Redis的SCAN命令是遍历大量键值对时的高效解决方案,它通过游标式迭代避免了KEYS命令可能引发的服务阻塞问题。在华为云Redis环境中,这个命令的工作机制与开源版本保持兼容,但在底层实现上针对云环境做了优化。1.1 S… · 2026/11/4 23:17:38

MySQL字符集与校对规则实战解析
MySQL字符集与校对规则实战解析

1. MySQL字符集与校对规则深度解析最近在排查一个线上SQL报错时,遇到了Illegal mix of collations这个看似简单却隐藏着不少细节的问题。作为MySQL数据库中最基础却又最容易被忽视的配置项,字符集和校对规则的选择直接影响着数据存储、查询性能和多语言支… · 2026/11/4 23:17:38

OpenClaw自动化文档生成方案设计与实现
OpenClaw自动化文档生成方案设计与实现

1. 项目背景与核心价值 最近在维护OpenClaw这个开源项目时,遇到一个典型的版本管理痛点:每次发布新版本后,配套的指令文档都需要手动同步更新。这不仅增加了维护成本,还容易因人为疏忽导致文档与代码实际功能脱节。经过两周的迭代… · 2026/11/4 23:17:38

Crowbar/Diksam解释器源码拆解:词法语法、GC与构建排错
Crowbar/Diksam解释器源码拆解:词法语法、GC与构建排错

简介:围绕自制编程语言主题的PDF资料,面向希望从语法设计、编译器实现到运行环境完整走通一遍的开发者与高年级学生,尤其适合已具备C语言基础、想理解解释器与编译器构造流程的读者。压缩包内共1个PDF文件,约2.38MB,以… · 2026/11/4 23:17:38

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

AI辅助技术栈评估:提升研发决策效率60%
AI辅助技术栈评估:提升研发决策效率60%

1. 项目背景与核心价值技术决策一直是研发团队面临的重大挑战。随着技术生态的快速演进,技术栈的选择、维护和迭代变得愈发复杂。我们团队在过去两年里,先后经历了三次重大技术栈迁移,每次都需要投入大量人力进行技术评估和风险分析。直到去年… · 2026/11/4 0:00:17

从生成Token到直接决策:Jev如何重塑AI Agent工程实践
从生成Token到直接决策:Jev如何重塑AI Agent工程实践

1. 从"生成文字"到"拍板决策":Jev 到底在解决什么问题大多数人第一次接触大模型,脑子里建立的模型是"输入问题、输出文字"。你问它今天天气怎么样,它给你一段描述;你让它写个周报,它给你… · 2026/11/4 0:00:17

32G统一内存跑大模型:内存账、TPS实测与端云分流
32G统一内存跑大模型:内存账、TPS实测与端云分流

想在一台 32G 统一内存的小主机上把大模型跑成"日常可用",这件事我前后折腾了小半年。标题里说的这台 Mac mini M6,是我们这次讨论的目标平台,具体到手规格以实物为准;但下面这套推算方法和实测思路,对任何统… · 2026/11/4 0:00:17

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码