鸿蒙ArkUI实战：为账单列表加入删除操作-北京尧图网络

鸿蒙ArkUI实战为账单列表加入删除操作技术栈HarmonyOS · ArkUI · ArkTS在账单管理场景中核心问题是搜索、筛选、排序、编辑和删除如果各维护一份数组很快会互相覆盖。可靠做法是围绕同一数据源逐层派生。本文以“随手账本”为示例围绕“为账单列表加入删除操作”展开重点讲解界面结构、状态组织、交互逻辑与测试方法。实现目标是为账单行加入删除入口点击后从当前状态数组中过滤目标账单列表和汇总随之更新。1. 运行效果2. 实现目标完成本文后可以掌握以下内容理解“为账单列表加入删除操作”在记账应用中的界面职责和信息层级掌握相关 ArkUI 组件的组合方式与样式设置梳理State状态、事件回调和界面刷新之间的关系通过正常路径、边界输入和页面回归验证实现结果。3. 开发环境项目配置开发框架 / 语言HarmonyOS ArkUI / ArkTSIDEDevEco Studio 6.1.1 Release模拟设备Pura 90系统版本HarmonyOS 6.1.1(24)示例包名com.huihui.harmony.pocketledger核心页面文件Index.ets4. 方案设计从业务流程看该功能位于以下链路中原始账单 → 搜索/筛选 → 排序 → 行操作 → 详情或撤销实现“删除账单”前可以先拆解以下四个问题输入是什么已有账单、页面偏好、用户输入还是固定演示数据状态放哪里是否需要State还是只做单向展示结果在哪里可见文字、颜色、列表、进度或页面分支如何变化失败时怎么办空输入、取消、越界、异常或未接入系统能力如何说明。本文采用的设计方案是为账单行加入删除入口点击后从当前状态数组中过滤目标账单列表和汇总随之更新。实现时尤其需要注意删除必须按稳定 id 定位按数组下标删除会在排序或筛选后误删另一条。这既关系到代码正确性也直接影响最终的使用体验。5. 核心代码解析以下代码展示了该功能的核心实现Row(){Blank();Text(编辑).fontSize(12).fontColor(#315BEA);Text(删除).fontSize(12).fontColor(#D83A4A).margin({left:18}).onClick((){this.billsthis.bills.filter((b:BillItem)b.id!item.id)})}.width(100%)组件与状态说明观察项说明组件构成Row× 1、Text× 2、Blank× 1链式属性 / 事件fontSize、fontColor、margin、onClick、filter、width读取状态this.bills关键文字“编辑”、“删除”、“100%”显式颜色#315BEA、#D83A4A阅读代码时不要只关注组件数量还要检查数据从哪里来、状态在哪里读取、事件如何写回以及最终由哪个组件呈现结果。6. 状态与交互ArkUI 的响应式更新可以按照“状态声明 → 组件读取 → 事件写入 → 界面刷新”理解。本文涉及的主要状态如下StateprivatesearchText:string;StateprivatetypeFilter:string全部类型;StateprivatecategoryFilter:string全部分类;StateprivatedateFilter:string本月;StateprivatesortMode:string按时间排序;交互由onClick回调触发。回调更新相关状态后依赖这些状态的文字、颜色、列表或页面分支会自动重新渲染。实现时应同时处理有效操作、取消操作和无效输入避免只覆盖理想路径。7. 深入实现从可运行到可维护7.1 先明确功能边界“删除账单”真正需要解决的数据是待删除记录的稳定 id状态核心是账单数组与删除确认状态。界面完成的标准不只是能看到对应组件而是从数据进入页面开始到用户操作、状态更新、结果渲染形成完整闭环。本文实现中的主路径是确认后移除目标记录并刷新汇总。如果只验证静态截图而没有检查状态变化后的结果就很容易遗漏看得见但用不稳的问题。验收时可以把功能拆成四个层次数据层确认字段来源、默认值和计算口径避免页面中出现多份互相独立的“同一数据”状态层只保存真正会变化且需要驱动界面的值可由已有数据计算出的结果不重复保存视图层通过组件层级、字号、间距和语义颜色呈现主次关系交互层明确点击、输入、取消、确认和失败后的状态去向。账单列表看似只是重复渲染实际上同时包含搜索、筛选、排序、分组、编辑和删除。可靠的处理顺序通常是先从原始账单得到副本再依次执行搜索与筛选之后排序最后分组。每个阶段都返回新结果避免直接修改原数组后让其他页面获得意外顺序。7.2 组件树与职责划分当前核心区域使用了Row× 1、Text× 2、Blank× 1相关属性和事件包括fontSize、fontColor、margin、onClick、filter、width。这些组件不应该平铺在一个超长的build()方法中。更稳妥的拆分方式是让页面组件负责整体布局让业务组件接收展示数据和回调让纯函数负责计算与格式化。例如页面只把“当前值、是否选中、点击后做什么”传给子组件子组件不直接修改不属于自己的账单、预算或账户集合。可以把调用关系整理为原始业务数据 ↓ 格式化 / 筛选 / 汇总等纯计算 ↓ 页面展示模型 ↓ ArkUI 组件读取状态 ↓ 事件回调更新唯一数据源 ↓ 依赖该数据的组件重新渲染这条链路中最需要避免的是“双向手工同步”。例如同一个结果既保存在页面字段中又能由账单数组计算得到那么任何一次新增、编辑或删除都可能只更新其中一份。对于本功能建议围绕“账单数组与删除确认状态”建立唯一入口并让其他显示值按需派生。7.3 状态更新为什么能驱动界面文章代码中读取的状态包括this.bills。ArkUI 会跟踪组件在构建阶段读取的响应式状态当事件回调写入新值后相关界面会重新计算。这里的重点不是把所有变量都标记为State而是保持状态最小化。临时输入、页面选择和异步结果可以是状态固定配置、格式化规则和可计算结果则更适合使用普通字段或方法。列表数据应从原始账单数组生成新结果先标准化搜索条件再组合类型、分类和日期筛选随后执行稳定排序最后进行日期分组。编辑、删除、撤销和详情跳转都按稳定 id 查找目标不能依赖经过筛选后随时变化的数组位置。本功能的重点边界是误触、重复点击和记录已不存在时不能删错。边界处理不应只靠禁用按钮还需要在真正的提交函数中再次校验因为业务方法未来可能从其他入口被调用。对于金额、比例和日期等数据还应在进入模型时完成标准化页面层只负责展示已经可信的结果。7.4 交互反馈与异常路径专项验证要覆盖多个条件同时生效的情况。例如先输入关键词再选择支出与某个分类最后切换排序结果必须满足所有条件清除其中一个条件时其他条件不能丢失。删除或编辑后还要检查分组标题、列表数量、首页汇总和详情入口是否同步变化。建议至少补充下面这组专项检查检查维度验证内容初始状态默认值与页面文案一致不依赖上一次热更新残留连续操作快速点击或重复提交不会生成重复结果取消恢复关闭弹层或返回页面后正式数据没有被草稿污染极端数据空值、零值、负值、超长文本或超大金额得到合理处理主题与布局深色主题、窄屏和字体放大后仍能识别主要信息回归验证修改该功能后首页汇总、列表、统计或设置中的关联区域保持一致7.5 面向真实项目的改进方向列表项必须使用稳定且唯一的业务 id不要使用数组下标代替。编辑、删除和详情跳转都应围绕 id 进行因为筛选和排序会随时改变位置。数据量增大后还应控制首屏渲染量、避免在每个列表项中重复执行昂贵格式化并对搜索输入采用适当的节流策略。针对“删除账单”推荐的重构方向是删除操作通过数据服务按 id 执行。重构时不要一次改动所有层可以先把纯计算提取出来并补测试再拆业务组件最后接入持久化或系统能力。这样每次调整都有可验证结果也能减少界面代码与数据逻辑相互牵连。真实项目中可以建立 LedgerQuery 描述搜索、筛选和排序条件再由纯函数或 Repository 返回结果。列表组件只渲染查询结果删除和编辑通过数据服务执行。数据量较大时格式化结果可以缓存搜索输入可以适当节流并继续使用稳定 id 保证组件复用正确。8. 关键实现推演8.1 数据流不能停留在截图层面“鸿蒙ArkUI实战为账单列表加入删除操作”是否真正完成不能只看目标区域是否已经出现还要检查数据从产生到显示的全过程。删除动作通过账单 id 定位记录先弹出明确确认或提供撤销再由数据层执行正式移除。账单列表应从不可变的原始集合开始构造查询结果推荐顺序是搜索与条件筛选、排序、日期分组最后生成可渲染的列表模型。每一层都返回新数组或新模型不直接修改原始账单顺序。这样首页最近记录、统计页和详情页仍然可以读取稳定的数据也便于判断当前空状态究竟来自无数据还是筛选条件过严。对 ArkUI 页面而言State更适合保存会被交互修改、并且确实需要驱动界面的最小状态能够由现有数据计算出的标题、金额、选中样式或列表结果应尽量按需派生。这样既减少同步点也让问题出现时能够沿着“输入—规则—状态—视图”快速定位。8.2 设计取舍决定后续维护成本本功能需要特别坚持的一项取舍是筛选列表中的数组下标不等于原始集合位置按下标删除可能误删另一条账单。这种约束看似比直接把逻辑写进组件多了一层但它能避免页面同时承担数据校验、业务计算和视觉呈现后续修改也更容易控制影响范围。所有编辑、删除、详情跳转和撤销操作都应围绕稳定的业务 id 进行不能依赖数组下标。筛选和排序会随时改变元素位置使用下标可能把操作落到另一条记录。日期分组标题、金额格式和分类信息应在列表模型中准备好组件只负责展示避免滚动过程中反复解析和格式化。实现过程中可以先保证业务语义准确再逐步调整视觉细节。若数据口径、状态归属或失败路径仍不明确单纯增加圆角、阴影和动画只会把问题隐藏得更深。8.3 边界场景要按连续操作验证本功能的重点边界包括删除最后一条结果、连续删除、删除后切换条件、关联统计刷新和持久化失败都要覆盖。验证时不应只做一次静态操作而要组成连续路径例如先改变条件、再执行核心动作、随后切换页面并返回最后重新启动应用检查状态是否符合预期。连续路径更容易暴露草稿污染、异步覆盖、列表位置变化和派生结果未刷新等问题。列表功能的边界通常出现在组合条件和连续操作上例如先搜索再切换分类、删除后立即撤销、编辑后记录跨越日期分组、排序后打开详情。测试不能只验证单个按钮而要核对操作前后的结果数量、顺序、分组汇总和空状态。数据量增大后可对搜索输入节流并控制首屏渲染量与昂贵计算次数。每次修复后除了重测当前功能还应回归与它共享同一数据源的首页、列表、统计、账户或设置区域防止局部正确而全局口径失配。8.4 从示例代码演进到真实项目继续扩展时可使用 DeleteTransactionCommand 返回被删除快照为撤销和失败恢复保留依据。组件输入尽量保持只读操作通过语义清晰的回调或命令向上提交业务层返回成功结果或结构化错误页面根据结果决定刷新、保留草稿、显示反馈还是允许重试。可以用 LedgerQuery 集中描述关键词、收支类型、分类、日期范围和排序方式再由查询服务返回统一结果。删除操作生成带过期时间的 UndoCommand编辑操作使用原记录副本作为草稿。页面组件只消费查询结果和命令回调使搜索、筛选、排序与数据修改保持清晰边界。完成重构后可以用四个问题做验收事实数据是否只有一个可信来源、派生结果是否使用统一规则、失败后是否保留可恢复状态、跨页面结果是否保持一致。四项都能回答清楚功能才算从演示效果进入可维护状态。9. 测试要点场景操作预期结果冷启动停止旧 Ability 后启动应用能看到“删除”不依赖热更新残留主路径确认后移除目标记录并刷新汇总目标区域与关联数据同步更新页面没有额外副作用边界路径验证“误触、重复点击和记录已不存在时不能删错”页面保持可用正式数据不被无效状态污染导航回归切换底部栏目后返回bills目标内容仍存在导航选中态正确可读性检查标题、数值、辅助文字、颜色和换行主结果优先文字不被遮挡或截断测试时重点观察删除必须按稳定 id 定位按数组下标删除会在排序或筛选后误删另一条。展示型功能应检查数据口径、文字换行和不同窗口下的可读性交互型功能还应覆盖空值、取消、重复点击和返回页面后的状态一致性。10. 常见问题与排查坑一删除必须按稳定 id 定位按数组下标删除会在排序或筛选后误删另一条。此类操作要沿着“目标 id → 执行条件 → 新数据集合 → 反馈结果”逐项检查。对于“删除账单”重点确认失败前没有发生部分写入重复触发不会再次修改“账单数组与删除确认状态”取消操作也不会留下残余状态。坑二列表项标识应稳定删除或编辑后不能让框架错误复用另一行。此类操作要沿着“目标 id → 执行条件 → 新数据集合 → 反馈结果”逐项检查。对于“删除账单”重点确认失败前没有发生部分写入重复触发不会再次修改“账单数组与删除确认状态”取消操作也不会留下残余状态。坑三危险操作需要确认或撤销且撤销必须保存真实被删数据。此类操作要沿着“目标 id → 执行条件 → 新数据集合 → 反馈结果”逐项检查。对于“删除账单”重点确认失败前没有发生部分写入重复触发不会再次修改“账单数组与删除确认状态”取消操作也不会留下残余状态。11. 工程化建议示例代码可以集中在Index.ets中便于理解但随着功能增加建议逐步按职责拆分页面层负责页面结构与路由切换业务组件层封装卡片、表单、列表项和状态提示模型与计算层管理账单、账户、预算等数据结构和纯计算逻辑基础服务层处理 Preferences、文件导入导出、通知和认证测试层覆盖纯函数、组件交互和设备端关键路径。对于“为账单列表加入删除操作”优先保证组件输入、输出和回调职责清晰避免页面组件直接承担全部业务状态。12. 总结本文围绕“删除账单”完成了界面与状态逻辑。实现关键是让待删除记录的稳定 id拥有明确来源并由“账单数组与删除确认状态”驱动 ArkUI 组件刷新。完成主路径后还需要验证误触、重复点击和记录已不存在时不能删错。如果继续用于真实项目建议删除操作通过数据服务按 id 执行使界面代码、业务计算与数据保存保持清晰边界。官方参考资料ArkUI 开发指南ArkTS 状态管理概述

鸿蒙ArkUI实战：为账单列表加入删除操作

相关推荐

麒麟 arm 安装达梦

鸿蒙ArkTS实战：实现账单金额与时间排序

CentOS 7安装GNOME与KDE桌面环境完整指南

更多资讯

南通哪儿考电工证通过率揭秘：应届生如何避开报名雷区

广东深圳电工证考试值不值得考？新手必须知道的避坑指南

张家利电工证千万别踩坑，新手如何避开中介陷阱拿证上岗

纳雍县电工证怎么转异地？郑州报考避坑指南全解析

虞城办电工证多少钱？怕考不过白交培训费？这些干货全告诉你

证书过期了不知道怎么复审延期？官方回应来了，江门低压电工证价格全解析

今日更新

高压电工证哪里可以挂多久拿证全攻略：实操考试心里没底怕挂科别慌

电工证的理论题目在哪考，外省证怎么转过来

工地太忙根本没时间复习考试，职业学校的电工证值不值得考？

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？