HarmonyOS掌上记账APP开发实践第97篇：如何实现列表项的新增和删除![

发布时间：2026/10/18 9:49:15

HarmonyOS掌上记账APP开发实践第97篇：如何实现列表项的新增和删除![
如何实现列表项的新增和删除场景介绍列表的编辑模式用途十分广泛常见于待办事项管理、文件管理、备忘录的记录管理等应用场景。在列表的编辑模式下新增和删除列表项是最基础的功能其核心是对列表项对应的数据集合进行数据添加和删除。下面以待办事项管理为例介绍如何快速实现新增和删除列表项功能。新增列表项如下图所示当用户点击添加按钮时将弹出列表项选择界面用户点击确定后列表中新增对应项目。图 新增待办开发步骤定义列表项数据结构和初始化列表数据构建列表整体布局和列表项。以待办事项管理为例首先定义待办事项的数据结构importutilfromohos.util;exportclassToDo{key:stringutil.generateRandomUUID(true);name:string;constructor(name:string){this.namename;}}然后初始化待办事项列表和可选事项列表StatetoDoData:ToDo[][];privateavailableThings:string[][读书,运动,旅游,听音乐,看电影,唱歌];构建UI界面。初始界面包含“待办”和新增按钮“”Text(待办).fontSize(36).margin({left:40})Blank()Text().fontWeight(FontWeight.Lighter).fontSize(40).margin({right:30})构建列表布局并通过ForEach循环渲染列表项List({space:10}){ForEach(this.toDoData,(toDoItem){ListItem(){...}},toDoItemtoDoItem.key)}为新增按钮绑定点击事件并在事件中通过TextPickerDialog.show添加新增列表项的逻辑Text().onClick((){TextPickerDialog.show({range:this.availableThings,// 将可选事项列表配置到选择对话框中onAccept:(value:TextPickerResult){this.toDoData.push(newToDo(this.availableThings[value.index]));// 用户点击确认将选择的数据添加到待办列表toDoData中},})})删除列表项如下图所示当用户长按列表项进入删除模式时提供用户删除列表项选择的交互界面用户勾选完成后点击删除按钮列表中删除对应的项目。图18长按删除待办事项开发步骤列表的删除功能一般进入编辑模式后才可使用所以需要提供编辑模式的入口。以待办列表为例通过LongPressGesture()监听列表项的长按事件当用户长按列表项时进入编辑模式。// ToDoListItem.etsFlex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){...}.gesture(GestureGroup(GestureMode.Exclusive,LongPressGesture()// 监听长按事件.onAction((){if(!this.isEditMode){this.isEditModetrue;//进入编辑模式this.selectedItems.push(this.toDoItem);// 记录长按时选中的列表项}})))需要响应用户的选择交互记录要删除的列表项数据。在待办列表中通过勾选框的勾选或取消勾选响应用户勾选列表项变化记录所有选择的列表项。// ToDoListItem.etsif(this.isEditMode){Checkbox().onChange((isSelected){if(isSelected){this.selectedItems.push(this.toDoItem)// 勾选时记录选中的列表项}else{letindexthis.selectedItems.indexOf(this.toDoItem)if(index!-1){this.selectedItems.splice(index,1)// 取消勾选时则将此项从selectedItems中删除}}})...}需要响应用户点击删除按钮事件删除列表中对应的选项。// ToDoList.etsButton(删除).onClick((){// 删除选中的列表项对应的toDoData数据letleftDatathis.toDoData.filter((item){returnthis.selectedItems.find((selectedItem)selectedItem!item);})this.toDoDataleftData;this.isEditModefalse;})...完整示例代码新增和删除列表项的实现共涉及三个文件各文件完整代码如下待办事项数据结构代码ToDo.ets// ToDo.etsimportutilfromohos.util;exportclassToDo{key:stringutil.generateRandomUUID(true)name:string;constructor(name:string){this.namename;}}待办事项列表代码ToDoList.ets// ToDoList.etsimport{ToDo}from../model/ToDo;import{ToDoListItem}from./ToDoListItem;EntryComponentstruct ToDoList{StatetoDoData:ToDo[][]Watch(onEditModeChange)StateisEditMode:booleanfalseStateselectedItems:ToDo[][]privateavailableThings:string[][读书,运动,旅游,听音乐,看电影,唱歌]saveData(value:string){this.toDoData.push(newToDo(value))}onEditModeChange(){if(!this.isEditMode){this.selectedItems[]}}build(){Column(){Row(){if(this.isEditMode){Text(X).fontSize(20).onClick((){this.isEditModefalse;}).margin({left:20,right:20})Text(已选择this.selectedItems.length项).fontSize(24)}else{Text(待办).fontSize(36).margin({left:40})Blank()Text().fontWeight(FontWeight.Lighter).fontSize(40).margin({right:30}).onClick((){TextPickerDialog.show({range:this.availableThings,onAccept:(value:TextPickerResult){this.toDoData.push(newToDo(this.availableThings[value.index]))console.info(to do data: JSON.stringify(this.toDoData))},})})}}.height(12%).width(100%)List({initialIndex:0,space:10}){ForEach(this.toDoData,toDoItem{ListItem(){ToDoListItem({isEditMode:$isEditMode,toDoItem:toDoItem,selectedItems:$selectedItems})}.padding({left:24,right:24,bottom:12})},toDoItemtoDoItem.key)}.height(73%).listDirection(Axis.Vertical).edgeEffect(EdgeEffect.Spring)if(this.isEditMode){Row(){Button(删除).width(80%).onClick((){letleftDatathis.toDoData.filter((item){returnthis.selectedItems.find((selectedItem)selectedItem!item)})console.log(leftData: leftData);this.isEditModefalse;this.toDoDataleftData;}).backgroundColor(#ffd75d5d)}.height(15%)}}.backgroundColor(#fff1f3f5).width(100%).height(100%)}}待办事项代码ToDoListItem.ets// ToDoListItem.etsimport{ToDo}from../model/ToDo;Componentexportstruct ToDoListItem{LinkisEditMode:booleanLinkselectedItems:ToDo[]privatetoDoItem:ToDo;hasBeenSelected():boolean{returnthis.selectedItems.indexOf(this.toDoItem)!-1}build(){Flex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Row({space:4}){Circle().width(24).height(24).fill(Color.White).borderWidth(3).borderRadius(30).borderColor(#ffdcdfdf).margin({right:10})Text(${this.toDoItem.name}).maxLines(1).fontSize(24).textOverflow({overflow:TextOverflow.Ellipsis})}.padding({left:12})if(this.isEditMode){Checkbox().select(this.hasBeenSelected()?true:false).onChange((isSelected){if(isSelected){this.selectedItems.push(this.toDoItem)}else{letindexthis.selectedItems.indexOf(this.toDoItem)if(index!-1){this.selectedItems.splice(index,1)}}}).width(24).height(24)}}.width(100%).height(80).padding({left:16,right:12,top:4,bottom:4}).borderRadius(24).linearGradient({direction:GradientDirection.Right,colors:this.hasBeenSelected()?[[0xffcdae,0.0],[0xFfece2,1.0]]:[[0xffffff,0.0],[0xffffff,1.0]]}).gesture(GestureGroup(GestureMode.Exclusive,LongPressGesture().onAction((){if(!this.isEditMode){this.isEditModetruethis.selectedItems.push(this.toDoItem)}})))}}

相关新闻

终极Chrome书签管理指南：3步告别混乱收藏夹

终极Chrome书签管理指南：3步告别混乱收藏夹

终极Chrome书签管理指南：3步告别混乱收藏夹 【免费下载链接】neat-bookmarks A neat bookmarks tree popup extension for Chrome [DISCONTINUED] 项目地址: https://gitcode.com/gh_mirrors/ne/neat-bookmarks 你是否曾在数百个杂乱的书签中迷失方向&#x…

2026/10/19 5:38:22 阅读更多 →
大模型时代的效果评估已失效？——基于178个LLM微调案例的评估范式迁移报告（内部白皮书节选）

大模型时代的效果评估已失效？——基于178个LLM微调案例的评估范式迁移报告（内部白皮书节选）

更多请点击： https://codechina.net 第一章：大模型时代效果评估范式的根本性危机 当百亿参数模型在零样本任务上超越人类基准，传统评估范式正遭遇前所未有的合法性挑战。BLEU、ROUGE、F1等基于词元匹配与统计对齐的指标，无法捕捉…

2026/10/18 9:50:26 阅读更多 →
大语文时代，拼的不只是课本知识！这款App帮孩子悄悄积累文学常识

大语文时代，拼的不只是课本知识！这款App帮孩子悄悄积累文学常识

大语文时代，考验的到底是什么？ 你有没有发现，现在的语文考试越来越"不讲武德"了？ 课文里学的是《司马光砸缸》，考试考的是"负荆请罪出自哪个历史典故"；课文里学的是《静夜思》&#xf…

2026/10/18 9:50:36 阅读更多 →

最新新闻

MCP协议深度解析：从设计思路到实战落地，智能体工具集成不再难

MCP协议深度解析：从设计思路到实战落地，智能体工具集成不再难

1. 为什么这一讲值得单独拿出来精讲MCP，全称 Model Context Protocol，是近两年在智能体工程圈子里被反复讨论的一个协议规范。如果你正在做 AI 应用开发，尤其是涉及工具调用、多智能体协作、外部数据源接入这类场景，那 MCP 基本是…

2026/10/19 5:38:26 阅读更多 →
OpenClaw requireApproval 插件：生产环境 AI 代理的人工审批闸门

OpenClaw requireApproval 插件：生产环境 AI 代理的人工审批闸门

OpenClaw 跑得越顺，我心里反而越没底。这句话听起来有点反直觉，但凡是把 OpenClaw 从个人实验搬到团队生产环境的人，多半能对上这个感觉：代理的执行力越强，越没人敢给它在生产环境里完全放开手脚。OpenClaw v2026.3.28…

2026/10/19 5:38:26 阅读更多 →
Agent上下文管理选型：流水式与汉堡式架构对比及混合方案实践

Agent上下文管理选型：流水式与汉堡式架构对比及混合方案实践

1. 从一次上下文溢出事故说起去年冬天，我接手了一个内部知识库问答助手的调优工作。上线第一周就出了状况：用户连续追问七八轮之后，Agent 开始答非所问，甚至把三轮之前已经确认过的订单编号又当成新信息重新询问。日志里最扎眼的一…

2026/10/19 5:38:26 阅读更多 →
PSO-BiLSTM与SHAP可解释性分析：多步时序回归的完整实践

PSO-BiLSTM与SHAP可解释性分析：多步时序回归的完整实践

上个月我手头有一个多步超前回归需求：一段工业设备运行监测数据，十几个连续采集的变量，要用过去24个时刻的观测预报未来三个时刻的一项关键质量指标。业务方提出三个硬性要求——预报要准，模型结果要能解释“到底哪些变量在起作用…

2026/10/19 5:38:26 阅读更多 →
OpenClaw基础版扩展指南：理解skills机制与必备技能清单

OpenClaw基础版扩展指南：理解skills机制与必备技能清单

装完OpenClaw基础版的第一天，很多人都会对着终端界面发愣——程序确实起来了，也能对话了，但让它干点正事，比如整理个文件、抓个网页信息、定时提醒你开会，它却总是回一句"我没有这个能力"。这不奇怪。OpenCl…

2026/10/19 5:38:26 阅读更多 →
AI开发工程师面试全解析：从简历到系统设计的高频考点与备战方法

AI开发工程师面试全解析：从简历到系统设计的高频考点与备战方法

面试这件事，最微妙的地方在于：你以为你在展示自己，面试官却往往在60分钟内只做一件事——验证“如果把这个项目交点给我，我能放心吗”。作为一个面过别人、也被别人面过的AI开发工程师，我见过太多准备充分却答偏的候选…

2026/10/19 5:37:25 阅读更多 →

日新闻

频率跟踪型PWM电源设计：臭氧发生器谐振点漂移与软开关实现

频率跟踪型PWM电源设计：臭氧发生器谐振点漂移与软开关实现

简介：本资源为电源技术方向的学术研究文档，聚焦介质阻挡放电型臭氧发生器电源的频率跟踪型PWM控制策略，面向电力电子、高压电源及臭氧应用领域的科研人员与工程技术人员。针对负载呈容性、等效电容随外加电压升高而增大、谐振频率随之漂移的难…

2026/10/19 0:00:47 阅读更多 →
Vibe Coding 遇上 TaoToken：把开发者思维圣殿的灵感流接入统一 Key 通道

Vibe Coding 遇上 TaoToken：把开发者思维圣殿的灵感流接入统一 Key 通道

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

2026/10/19 0:00:47 阅读更多 →
HundredCV-Chat话题建模实战教程：利用4,871个内置话题标签构建主题分析系统

HundredCV-Chat话题建模实战教程：利用4,871个内置话题标签构建主题分析系统

【免费下载链接】HundredCV-Chat 项目地址： https://ai.gitcode.com/hf_mirrors/Jax-dan/HundredCV-Chat 点击查看 免费下载 HundredCV-Chat 是一个由 100 位青年简历数据开发而来的中文多轮对话数据集，共包含 24,750 组日常闲聊对话和 4,871 个话题标签…

2026/10/19 0:00:47 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/18 0:00:55 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/18 0:00:55 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/19 1:30:52 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

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

2026/10/19 2:54:50 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

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

2026/10/17 17:22:31 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

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

2026/10/18 12:16:16 阅读更多 →