HarmonyOS掌上记账APP开发实践第94篇：如何实现删除多选框选项功能

发布时间：2026/9/22 16:16:14

HarmonyOS掌上记账APP开发实践第94篇：如何实现删除多选框选项功能
如何删除多选框选项场景说明通常情况下我们使用多选框都会伴随对选项的操作比较常见的操作是选中后删除比如删除购物车的商品、删除账单、删除图片等等。但是当前HarmonyOS针对多选框组件并没有提供直接的删除其选项的方法需要开发者自己来实现。本例提供了一种实现方案供开发者参考。效果呈现本例demo最终效果如下实现思路本例中涉及的关键特性及实现方案如下多选框使用CheckboxGroup组件构建多选框标题使用Checkbox组件构建多选框选项。删除多选框选项通过CheckboxGroup的onChange回调获取到各个选项的选中状态在删除操作中将选中的选项从选项列表中删除。删除时弹出确认框使用promptAction模块调用showDialog方法弹出对话框通过回调获取到用户点击的是取消按钮还是确定按钮如果是确定按钮则执行删除操作。开发步骤搭建UI布局。整体纵向布局那就采用Column组件全选框用CheckboxGroup组件然后每个选项都包括一个选择框Checkbox组件和一个文本Text组件且为横向布局那我们可以把它们放在Flex组件中最后是一个Button组件。这样整体布局就有了具体代码如下Componentstruct CheckboxDemo{build(){Column(){Flex({}){CheckboxGroup({})Text(水果清单)}Flex({}){Checkbox({})Text(苹果)}Flex({}){Checkbox({})Text(菠萝)}Flex({}){Checkbox({})Text(柚子)}Button(删除)}}}框架搭好了看下效果可以看到主选框和选项对齐了接下来我们来调整下样式。先给CheckboxGroup取个名字fruit_list然后为各个Checkbox添加相同的group名称这样就可以将Checkbox挂靠到CheckboxGroup下剩下的就是给各个组件添加margin、fontSize等通用属性了不清楚各个组件有哪些属性的请自行查阅组件参考具体代码如下Componentstruct CheckboxDemo{build(){Column(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){// 将CheckboxGroup命名为fruit_listCheckboxGroup({group:fruit_list}).selectedColor(#007DFF)Text(水果清单).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(FontWeight.Bold)}Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){// 通过group参数将Checkbox挂到CheckboxGroup下Checkbox({name:苹果,group:fruit_list}).selectedColor(#007DFF)Text(苹果).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(500)}Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Checkbox({name:菠萝,group:fruit_list}).selectedColor(#007DFF)Text(菠萝).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(500)}Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Checkbox({name:柚子,group:fruit_list}).selectedColor(#007DFF)Text(柚子).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(500)}Button(删除).margin({top:20,left:35}).fontSize(15).padding({top:5,bottom:5,left:15,right:15})}}}我们再来看下效果发现多选框的布局已经正常了简化代码。当前代码重复性很高包含Checkbox的三个Flex的结构完全一样我们可以简化一下。把重复的结构通过Builder抽取出来作为一个自定义组件用到的地方进行引用即可每个Flex呈现的内容不同那就将不同的内容作为参数传入。具体代码如下Componentstruct CheckboxDemo{// flexNameList存储checkbox选项的文本内容使用State修饰后flexNameList发生变化UI会同步刷新StateflexNameList:string[][苹果,菠萝,柚子]Builder// 将重复内容封装成flexItem通过参数checkboxName为Text组件传入显示文本通过groupName绑定CheckboxGroupflexItem(checkboxName:string,groupName:string){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Checkbox({name:checkboxName,group:groupName}).selectedColor(#007DFF)Text(checkboxName).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(500)}.margin({left:36})}build(){Column(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){CheckboxGroup({group:fruit_list}).selectedColor(#007DFF)Text(水果清单).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(FontWeight.Bold)}// 通过ForEach遍历flexNameList循环渲染生成UIForEach(this.flexNameList,(item:any){// 引用封装的flexItem模板this.flexItem(item,fruit_list)})Button(删除).margin({top:20,left:35}).fontSize(15).padding({top:5,bottom:5,left:15,right:15})}.alignItems(HorizontalAlign.Center)}}添加删除逻辑。本例中是通过以下方式实现删除操作的将选中的水果项从flexNameList中删除为方便展示本文直接将数据存储在数组中实际开发需要对接数据库由于flexNameList被State修饰所以其发生变化时会重新执行Build从而完成UI刷新展示删除后的选项。要实现上述逻辑首先需要获取到被选中的水果项。这里可以通过CheckboxGroup的onChange回调获取当选项的状态发生变化时会触发回调并返回各选项的选中状态。具体代码如下Componentstruct CheckboxDemo{...// itemStatus用来存储各选项的选中状态privateitemStatus:CheckboxGroupResult...build(){Column(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){CheckboxGroup({group:fruit_list}).selectedColor(#007DFF)// 选项状态发生变化时触发onChange回调各选项的选中状态储存在itemName中并返回通过itemStatus.name可以获取到被选中的选项列表.onChange((itemName:CheckboxGroupResult){this.itemStatusitemName})...}.alignItems(HorizontalAlign.Center)}}将各选项的选中状态存储到itemStatus后我们就可以通过Button触发删除操作了。当点击删除按钮时触发删除操作所以给Button添加onClick事件并添加删除逻辑。代码如下Componentstruct CheckboxDemo{......// itemStatus用来存储各选项的选中状态privateitemStatus:CheckboxGroupResult......build(){Column(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){CheckboxGroup({group:fruit_list}).selectedColor(#007DFF)// 选项状态发生变化时触发onChange回调各选项的选中状态储存在itemName中并返回通过itemStatus.name可以获取到被选中的选项列表.onChange((itemName:CheckboxGroupResult){this.itemStatusitemName})......Button(删除).margin({top:20,left:35}).fontSize(15).padding({top:5,bottom:5,left:15,right:15})// 点击触发删除操作.onClick((){// 被选中的项存储在this.itemStatus.name列表中for(letiofthis.itemStatus.name){// 从flexNameList中删除被选中的项刷新UIthis.flexNameList.splice(this.flexNameList.indexOf(i),1)}})}.alignItems(HorizontalAlign.Center)}}添加删除确认框。使用promptAction模块调用showDialog方法弹出对话框然后将删除操作绑定到对话框的确定按钮具体代码如下// 导入promptAction模块importpromptActionfromohos.promptAction;Componentstruct CheckboxDemo{......// itemStatus用来存储各选项的选中状态privateitemStatus:CheckboxGroupResult......build(){Column(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){CheckboxGroup({group:fruit_list}).selectedColor(#007DFF)// 选项状态发生变化时触发onChange回调各选项的选中状态储存在itemName中并返回通过itemStatus.name可以获取到被选中的选项列表.onChange((itemName:CheckboxGroupResult){this.itemStatusitemName})......Button(删除).margin({top:20,left:35}).fontSize(15).padding({top:5,bottom:5,left:15,right:15})// 点击触发删除操作.onClick((){// 调用对话框promptAction.showDialog({title:,message:确定删除吗,buttons:[{text:取消,color:#000000},{text:确定,color:#000000}]})// 用户选择通过data回传当data.index为1时用户选择确定当data.index为0时用户选择取消.then(data{// 当用户选择确定时进行删除操作if(data.index1){// 被选中的项存储在this.itemStatus.name列表中for(letiofthis.itemStatus.name){// 从flexNameList中删除被选中的项刷新UIthis.flexNameList.splice(this.flexNameList.indexOf(i),1)}}})})}.alignItems(HorizontalAlign.Center)}}完整代码本例完整代码如下importpromptActionfromohos.promptAction;EntryComponentstruct CheckboxDemo{StateflexNameList:string[][苹果,菠萝,柚子]privateitemStatus:CheckboxGroupResultBuilderflexItem(checkboxName:string,groupName:string){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Checkbox({name:checkboxName,group:groupName}).selectedColor(#007DFF)Text(checkboxName).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(500)}.margin({left:36})}build(){Column(){if(this.flexNameList.length!0){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){CheckboxGroup({group:fruit_list}).selectedColor(#007DFF).onChange((itemName:CheckboxGroupResult){this.itemStatusitemName})Text(水果清单).margin({right:20}).fontSize(14).lineHeight(20).fontColor(#182431).fontWeight(FontWeight.Bold)}.margin({top:150})ForEach(this.flexNameList,(item:any){this.flexItem(item,fruit_list)})Button(删除).margin({top:20,left:35}).fontSize(15).padding({top:5,bottom:5,left:15,right:15}).onClick((){promptAction.showDialog({title:,message:确定删除吗,buttons:[{text:取消,color:#000000},{text:确定,color:#000000}]}).then(data{if(data.index1){for(letiofthis.itemStatus.name){this.flexNameList.splice(this.flexNameList.indexOf(i),1)}}})})}else{}}.alignItems(HorizontalAlign.Center)}}参考ChecckboxGroupCheckboxFlexButtonohos.promptAction (弹窗)ForEach循环渲染State状态管理Builder动态构建UI元素

相关新闻

珠宝展柜灯光为什么要求高显指？3000K和4000K差别大吗？

珠宝展柜灯光为什么要求高显指？3000K和4000K差别大吗？

珠宝展柜须用高显指灯光（CRI≥95），因为普通灯光会让珠宝失色——钻石火彩出不来，翡翠正阳绿发灰，黄金金色暗淡。色温3000K（暖黄光）适合黄金首饰，4000K（中性白光&#xff…

2026/9/22 2:20:01 阅读更多 →
【万字文档+源码】 基于springboot+vue大学生心理咨询平台-可用于毕设-课程设计-练手学习-学习资料分享

【万字文档+源码】 基于springboot+vue大学生心理咨询平台-可用于毕设-课程设计-练手学习-学习资料分享

基于springbootvue大学生心理咨询平台1. 项目概述 1.1 项目背景 当代大学生面临学业、就业、人际关系等多重压力，心理问题发生率逐年上升。传统线下心理咨询存在预约不便、隐私顾虑、宣传渠道单一等痛点。为搭建数字化心理健康服务渠道，本项目开发大学…

2026/9/22 19:25:22 阅读更多 →
涉密信息系统集成资质认定材料准备指南——核心清单与常见问题

涉密信息系统集成资质认定材料准备指南——核心清单与常见问题

摘要：涉密信息系统集成资质是企业进入涉密信息化项目领域的法定准入条件。材料准备是资质认定流程中的基础环节，材料不全、格式不符或内容不一致，是申报被退回或补正的主要原因。本文依据现行资质管理办法及受理窗口常见要求，系统…

2026/9/11 12:45:35 阅读更多 →

最新新闻

爱普生L551驱动原理深度解析：面试被问底层逻辑？这3个最佳实践让你稳过

爱普生L551驱动原理深度解析：面试被问底层逻辑？这3个最佳实践让你稳过

爱普生L551驱动原理深度解析：面试被问底层逻辑？这3个最佳实践让你稳过 面试被问原理答不上来，那种大脑一片空白的尴尬，相信很多技术老兵都经历过。当面试官指着你的简历问“爱普生L551的墨水流动机制底层是如何控制的？”时，如果你只能背出参数…

2026/9/22 19:25:28 阅读更多 →
黄继鹏认证避坑指南：3个致命错误导致白花钱，附补救代码

黄继鹏认证避坑指南：3个致命错误导致白花钱，附补救代码

黄继鹏认证避坑指南：3个致命错误导致白花钱，附补救代码 官方文档那几百页根本没人看得完，尤其是刚入行的培训机构学员，盯着PDF发呆半小时还是不知道下一步点哪里。别慌，这份 避坑指南…

2026/9/22 19:25:28 阅读更多 →
搞定笔记本配置，3个实战项目让你彻底告别纸上谈兵

搞定笔记本配置，3个实战项目让你彻底告别纸上谈兵

搞定笔记本配置，3个实战项目让你彻底告别纸上谈兵 看了一堆教程还是不会写项目？这种痛苦我太懂了。 别急着焦虑，问题不在你笨，而在你缺了把理论变肌肉记忆的 实战项目 。…

2026/9/22 19:25:28 阅读更多 →
3步搞定中国风背景图后端生成，面试源码解析不再虚

3步搞定中国风背景图后端生成，面试源码解析不再虚

3步搞定中国风背景图后端生成，面试源码解析不再虚 上周陪朋友模拟面试，他卡在“动态海报生成”这道题上，支支吾吾答不出原理，最后只能尴尬收尾。别笑，很多后端开发者对 中国风背景图…

2026/9/22 19:25:28 阅读更多 →
余额宝产品介绍实战：新手避坑指南与核心逻辑拆解

余额宝产品介绍实战：新手避坑指南与核心逻辑拆解

余额宝产品介绍实战：新手避坑指南与核心逻辑拆解 官方文档往往厚得像砖头，翻两页就头晕，抓不住重点？做开发最怕的就是这种“知识断层”。今天咱们不背定义，直接上干货，聊聊 余额宝产品介绍…

2026/9/22 19:25:28 阅读更多 →
双目测距5个坑与Python完整示例

双目测距5个坑与Python完整示例

双目测距5个坑与Python完整示例 刚把Github上抄来的OpenCV双目测距代码丢进VSCode，终端直接报 cv2.error 。调参调了三天，相机标定参数全对，就是算不出距离。别慌，这行代码我踩过的坑比你喝的水还多。…

2026/9/22 19:24:27 阅读更多 →

日新闻

3台商务办公笔记本实测：手写实现环境配置，告别卡半天

3台商务办公笔记本实测：手写实现环境配置，告别卡半天

3台商务办公笔记本实测：手写实现环境配置，告别卡半天 配置环境就卡半天？别怪机器慢，多半是你没选对工具链。在Java、Go或Python的项目现场， 手写实现…

2026/9/22 0:00:41 阅读更多 →
剑帝加点速查手册：3分钟搞懂核心逻辑

剑帝加点速查手册：3分钟搞懂核心逻辑

剑帝加点速查手册：3分钟搞懂核心逻辑 面试被问原理答不上来，是不是常态？别慌。很多开发者对着 GitHub 开源仓库里的代码发呆，看似简单实则暗藏玄机。今天这份【剑帝加点】速查手册，直接带你拆解核心实现，把面试必考的原理讲透。…

2026/9/22 0:00:41 阅读更多 →
手写实现图片压缩网站核心：搞定WebP转换与质量调优

手写实现图片压缩网站核心：搞定WebP转换与质量调优

手写实现图片压缩网站核心：搞定WebP转换与质量调优 复制来的代码跑不通不知道怎么调？别慌，这种“复制粘贴地狱”在开发圈太常见了。尤其是做 图片压缩网站…

2026/9/22 0:00:41 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/22 4:32:41 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/22 4:38:57 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/22 8:51:04 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/21 15:36:51 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/21 15:36:51 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/22 2:43:42 阅读更多 →