news 2026/7/30 14:45:47

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HarmonyOS掌上记账APP开发实践第94篇：如何实现删除多选框选项功能

如何删除多选框选项

场景说明

通常情况下，我们使用多选框都会伴随对选项的操作，比较常见的操作是选中后删除，比如删除购物车的商品、删除账单、删除图片等等。但是，当前HarmonyOS针对多选框组件并没有提供直接的删除其选项的方法，需要开发者自己来实现。本例提供了一种实现方案，供开发者参考。

效果呈现

本例demo最终效果如下：

实现思路

本例中涉及的关键特性及实现方案如下：

  • 多选框：使用CheckboxGroup组件构建多选框标题，使用Checkbox组件构建多选框选项。
  • 删除多选框选项：通过CheckboxGroup的onChange回调获取到各个选项的选中状态，在删除操作中，将选中的选项从选项列表中删除。
  • 删除时弹出确认框：使用promptAction模块调用showDialog方法弹出对话框，通过回调获取到用户点击的是取消按钮还是确定按钮，如果是确定按钮则执行删除操作。

开发步骤

  1. 搭建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_list'CheckboxGroup({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})}}}

    我们再来看下效果，发现多选框的布局已经正常了：

  2. 简化代码。
    当前代码重复性很高，包含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)}}

  3. 添加删除逻辑。
    本例中是通过以下方式实现删除操作的：将选中的水果项从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.itemStatus=itemName})...}.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.itemStatus=itemName})......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)}}

  4. 添加删除确认框。
    使用promptAction模块调用showDialog方法弹出对话框，然后将删除操作绑定到对话框的确定按钮，具体代码如下：

    // 导入promptAction模块importpromptActionfrom'@ohos.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.itemStatus=itemName})......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.index===1){// 被选中的项存储在this.itemStatus.name列表中for(letiofthis.itemStatus.name){// 从flexNameList中删除被选中的项，刷新UIthis.flexNameList.splice(this.flexNameList.indexOf(i),1)}}})})}.alignItems(HorizontalAlign.Center)}}

完整代码

本例完整代码如下：

importpromptActionfrom'@ohos.promptAction';@Entry@Componentstruct CheckboxDemo{@StateflexNameList:string[]=['苹果','菠萝','柚子']privateitemStatus:CheckboxGroupResult@BuilderflexItem(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.itemStatus=itemName})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.index===1){for(letiofthis.itemStatus.name){this.flexNameList.splice(this.flexNameList.indexOf(i),1)}}})})}else{}}.alignItems(HorizontalAlign.Center)}}

参考

  • ChecckboxGroup
  • Checkbox
  • Flex
  • Button
  • ohos.promptAction (弹窗)
  • ForEach循环渲染
  • @State状态管理
  • @Builder动态构建UI元素
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/30 14:41:43

Python数据处理中NaN的全面解析：从原理到排查与处理实战

1. 从“NaN”到“搞定”：一个Python开发者必须跨过的坎“NaN”这个玩意儿，但凡写过点Python数据处理、科学计算或者机器学习的代码，几乎没人能躲得过。它就像代码里的幽灵，不声不响地出现，然后让你的求和（s…

作者头像 李华
网站建设 2026/7/30 14:38:14

游戏AI决策架构深度对比：行为树、GOAP与效用AI的选型指南

1. 项目概述：为什么我们需要对比三种AI决策架构？ 在游戏开发，尤其是涉及复杂NPC（非玩家角色）行为的项目中，AI决策架构的选择往往是决定项目成败与开发效率的关键一环。我见过太多团队在项目初期凭感觉或“流…

作者头像 李华
网站建设 2026/7/30 14:36:32

Aidoku：基于WebAssembly的终极iOS漫画阅读解决方案

Aidoku：基于WebAssembly的终极iOS漫画阅读解决方案 【免费下载链接】Aidoku Free and open source manga reader for iOS and iPadOS 项目地址: https://gitcode.com/gh_mirrors/ai/Aidoku Aidoku是一款专为iOS和iPadOS设计的开源漫画阅读应用，它…

作者头像 李华
网站建设 2026/7/30 14:34:26

FastAPI从入门到实战：2026年Python异步Web开发全链路指南

如果你正在寻找一个既能快速上手，又能支撑高并发生产环境的 Python Web 框架，那么 FastAPI 很可能就是你需要的答案。但网上很多教程要么停留在简单的 "Hello World"，要么直接抛出复杂的项目结构，让初学者望而却步。真正…

作者头像 李华
网站建设 2026/7/30 14:30:51

3分钟快速上手：全网视频资源下载神器res-downloader终极教程

3分钟快速上手：全网视频资源下载神器res-downloader终极教程 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 还在…

作者头像 李华
网站建设 2026/7/30 14:30:08

HEIF Utility：轻松解决iPhone照片在Windows上的兼容问题

HEIF Utility：轻松解决iPhone照片在Windows上的兼容问题 【免费下载链接】HEIF-Utility HEIF Utility - View/Convert Apple HEIF images on Windows. 项目地址: https://gitcode.com/gh_mirrors/he/HEIF-Utility 你是否曾经遇到过这样的困扰：从i…

作者头像 李华