news 2026/7/29 22:35:27

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HarmonyOS掌上记账APP开发实践第97篇：如何实现列表项的新增和删除![

如何实现列表项的新增和删除

场景介绍

列表的编辑模式用途十分广泛，常见于待办事项管理、文件管理、备忘录的记录管理等应用场景。在列表的编辑模式下，新增和删除列表项是最基础的功能，其核心是对列表项对应的数据集合进行数据添加和删除。

下面以待办事项管理为例，介绍如何快速实现新增和删除列表项功能。

新增列表项

如下图所示，当用户点击添加按钮时，将弹出列表项选择界面，用户点击确定后，列表中新增对应项目。

图： 新增待办

开发步骤

  1. 定义列表项数据结构和初始化列表数据，构建列表整体布局和列表项。
    以待办事项管理为例，首先定义待办事项的数据结构：

    importutilfrom'@ohos.util';exportclassToDo{key:string=util.generateRandomUUID(true);name:string;constructor(name:string){this.name=name;}}

  2. 然后，初始化待办事项列表和可选事项列表：

    @StatetoDoData:ToDo[]=[];privateavailableThings:string[]=['读书','运动','旅游','听音乐','看电影','唱歌'];

  3. 构建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(){...}},toDoItem=>toDoItem.key)}

  4. 为新增按钮绑定点击事件，并在事件中通过TextPickerDialog.show添加新增列表项的逻辑：

    Text('+').onClick(()=>{TextPickerDialog.show({range:this.availableThings,// 将可选事项列表配置到选择对话框中onAccept:(value:TextPickerResult)=>{this.toDoData.push(newToDo(this.availableThings[value.index]));// 用户点击确认，将选择的数据添加到待办列表toDoData中},})})

删除列表项

如下图所示，当用户长按列表项进入删除模式时，提供用户删除列表项选择的交互界面，用户勾选完成后点击删除按钮，列表中删除对应的项目。

图18长按删除待办事项

开发步骤

  1. 列表的删除功能一般进入编辑模式后才可使用，所以需要提供编辑模式的入口。
    以待办列表为例，通过LongPressGesture()监听列表项的长按事件，当用户长按列表项时，进入编辑模式。

    // ToDoListItem.etsFlex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){...}.gesture(GestureGroup(GestureMode.Exclusive,LongPressGesture()// 监听长按事件.onAction(()=>{if(!this.isEditMode){this.isEditMode=true;//进入编辑模式this.selectedItems.push(this.toDoItem);// 记录长按时选中的列表项}})))

  2. 需要响应用户的选择交互，记录要删除的列表项数据。
    在待办列表中，通过勾选框的勾选或取消勾选，响应用户勾选列表项变化，记录所有选择的列表项。

    // ToDoListItem.etsif(this.isEditMode){Checkbox().onChange((isSelected)=>{if(isSelected){this.selectedItems.push(this.toDoItem)// 勾选时，记录选中的列表项}else{letindex=this.selectedItems.indexOf(this.toDoItem)if(index!==-1){this.selectedItems.splice(index,1)// 取消勾选时，则将此项从selectedItems中删除}}})...}

  3. 需要响应用户点击删除按钮事件，删除列表中对应的选项。

    // ToDoList.etsButton('删除').onClick(()=>{// 删除选中的列表项对应的toDoData数据letleftData=this.toDoData.filter((item)=>{returnthis.selectedItems.find((selectedItem)=>selectedItem!==item);})this.toDoData=leftData;this.isEditMode=false;})...

完整示例代码

新增和删除列表项的实现共涉及三个文件，各文件完整代码如下：

  1. 待办事项数据结构代码（ToDo.ets）：
    // ToDo.etsimportutilfrom'@ohos.util';exportclassToDo{key:string=util.generateRandomUUID(true)name:string;constructor(name:string){this.name=name;}}
  2. 待办事项列表代码（ToDoList.ets）：
    // ToDoList.etsimport{ToDo}from'../model/ToDo';import{ToDoListItem}from'./ToDoListItem';@Entry@Componentstruct ToDoList{@StatetoDoData:ToDo[]=[]@Watch('onEditModeChange')@StateisEditMode:boolean=false@StateselectedItems: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.isEditMode=false;}).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})},toDoItem=>toDoItem.key)}.height('73%').listDirection(Axis.Vertical).edgeEffect(EdgeEffect.Spring)if(this.isEditMode){Row(){Button('删除').width('80%').onClick(()=>{letleftData=this.toDoData.filter((item)=>{returnthis.selectedItems.find((selectedItem)=>selectedItem!=item)})console.log('leftData: '+leftData);this.isEditMode=false;this.toDoData=leftData;}).backgroundColor('#ffd75d5d')}.height('15%')}}.backgroundColor('#fff1f3f5').width('100%').height('100%')}}
  3. 待办事项代码（ToDoListItem.ets）：
    // ToDoListItem.etsimport{ToDo}from'../model/ToDo';@Componentexportstruct ToDoListItem{@LinkisEditMode:boolean@LinkselectedItems: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{letindex=this.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.isEditMode=truethis.selectedItems.push(this.toDoItem)}})))}}
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/29 22:28:44

微商城快速上线哪家好？从模板、支付、营销三步判断

2026微信公开课PRO披露，2025年8月至12月，承载微信小店的「订单与卡包」访问数量增长132%，成交额增长320%。这说明微信生态内交易正在加速增长。对中小商家来说，微商城不是“有没有”的问题，而是能不能快速上线、快速开…

作者头像 李华
网站建设 2026/7/29 22:21:11

Anna KVS深度解析：UC Berkeley打造的革命性低延迟键值存储系统

Anna KVS深度解析：UC Berkeley打造的革命性低延迟键值存储系统 【免费下载链接】anna A low-latency, cloud-native KVS 项目地址: https://gitcode.com/gh_mirrors/an/anna Anna是由UC Berkeley的RISE Lab开发的一款低延迟键值存储系统（KVS&…

作者头像 李华
网站建设 2026/7/29 22:20:13

AI识别三大部署形态：前端、Atlas边端、后端服务器部署方法及优势解析

随着人工智能视觉识别技术的普及，AI识别落地场景愈发多元，从移动端抓拍、现场实时检测，到边缘站点智能分析、云端大规模数据研判，不同部署架构直接决定了识别系统的延迟、算力、成本与稳定性。目前行业主流部署方式分为前端设备部…

作者头像 李华
网站建设 2026/7/29 22:15:50

Bulk Crap Uninstaller：Windows软件彻底卸载的专业解决方案

Bulk Crap Uninstaller：Windows软件彻底卸载的专业解决方案 【免费下载链接】Bulk-Crap-Uninstaller Remove large amounts of unwanted applications quickly. 项目地址: https://gitcode.com/gh_mirrors/bu/Bulk-Crap-Uninstaller 你是否曾经为Windows系统…

作者头像 李华
网站建设 2026/7/29 22:15:01

CenterPoint — Center-based 3D Object Detection and Tracking论文精读

一、论文基本信息项目内容标题Center-based 3D Object Detection and Tracking作者Tianwei Yin, Xingyi Zhou, Philipp Krhenbhl单位UT Austin发表arXiv 2020（NeurIPS 2020 nuScenes挑战赛 Top 4中3个方案采用）代码https://github.com/tianweiy/CenterPo…

作者头像 李华