OpenHarmony实战开发-如何删除多选框选项

最新推荐文章于 2024-08-24 16:13:21 发布
最新推荐文章于 2024-08-24 16:13:21 发布
阅读量863 收藏 11
点赞数 7
分类专栏： 鸿蒙 HarmonyOS OpenHarmony 文章标签： harmonyos OpenHarmony HarmonyOS 鸿蒙系统 华为 鸿蒙 鸿蒙应用开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139153480
版权
鸿蒙 同时被 3 个专栏收录
659 篇文章 9 订阅
订阅专栏
HarmonyOS
652 篇文章 4 订阅
订阅专栏
OpenHarmony
647 篇文章 7 订阅
订阅专栏

场景说明

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

效果呈现

本例最终效果如下：

在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 4.0 Beta1
  • SDK: Ohos_sdk_public 4.0.7.5 (APIVersion 10 Beta1)

实现思路

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

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

开发步骤

1.搭建UI布局。 整体纵向布局，那就采用Column组件；全选框用CheckboxGroup组件，然后每个选项都包括一个选择框（Checkbox组件）和一个文本（Text组件），且为横向布局，那我们可以把它们放在Flex组件中；最后是一个Button组件。这样整体布局就有了，具体代码如下：

@Component
struct CheckboxDemo{
  build(){
    Column(){
      Flex({}){
        CheckboxGroup({})
        Text('水果清单')
      }
      Flex({}){
        Checkbox({})
        Text('苹果')
      }
      Flex({}){
        Checkbox({})
        Text('菠萝')
      }
      Flex({}){
        Checkbox({})
        Text('柚子')
      }
      Button('删除')
    }
  }
}

框架搭好了，看下效果：

checkbox-before-improve

可以看到主选框和选项对齐了，接下来我们来调整下样式。 先给CheckboxGroup取个名字：fruit_list，然后为各个Checkbox添加相同的group名称，这样就可以将Checkbox挂靠到CheckboxGroup下，剩下的就是给各个组件添加margin、fontSize等通用属性了，不清楚各个组件有哪些属性的请自行查阅组件参考，具体代码如下：

@Component
struct 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})
    }
  }
}

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

checkbox-after-improve

2.简化代码。 当前代码重复性很高，包含Checkbox的三个Flex的结构完全一样，我们可以简化一下。把重复的结构通过@Builder抽取出来作为一个自定义组件，用到的地方进行引用即可；每个Flex呈现的内容不同，那就将不同的内容作为参数传入。具体代码如下：

@Component
struct CheckboxDemo{
  // flexNameList存储checkbox选项的文本内容；使用@State修饰后，flexNameList发生变化，UI会同步刷新
  @State flexNameList:string[] = ['苹果','菠萝','柚子']
  @Builder
  // 将重复内容封装成flexItem，通过参数checkboxName为Text组件传入显示文本，通过groupName绑定CheckboxGroup
  flexItem(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循环渲染生成UI
      ForEach(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回调获取，当选项的状态发生变化时，会触发回调并返回各选项的选中状态。 具体代码如下：

@Component
struct CheckboxDemo{
 ...
  // itemStatus用来存储各选项的选中状态
  private itemStatus: 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事件，并添加删除逻辑。代码如下：

@Component
struct CheckboxDemo{
 ......
  // itemStatus用来存储各选项的选中状态
  private itemStatus: 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(let i of this.itemStatus.name){
            // 从flexNameList中删除被选中的项，刷新UI
            this.flexNameList.splice(this.flexNameList.indexOf(i),1)
          }
        })
    }.alignItems(HorizontalAlign.Center)
  }
}

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

// 导入promptAction模块
import promptAction from '@ohos.promptAction';
@Component
struct CheckboxDemo{
 ......
  // itemStatus用来存储各选项的选中状态
  private itemStatus: 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(let i of this.itemStatus.name){
                  // 从flexNameList中删除被选中的项，刷新UI
                  this.flexNameList.splice(this.flexNameList.indexOf(i),1)
                }
              }
            })
        })
    }.alignItems(HorizontalAlign.Center)
  }
}

完整代码

本例完整代码如下：

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct CheckboxDemo{
  @State flexNameList:string[] = ['苹果','菠萝','柚子']
  private itemStatus:CheckboxGroupResult
  @Builder
  flexItem(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(let i of this.itemStatus.name){
                    this.flexNameList.splice(this.flexNameList.indexOf(i),1)
                  }
                }
              })
          })
      }else{

      }
    }.alignItems(HorizontalAlign.Center)
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenHarmony实战开发-应用性能分析工具CPU Profiler的使用指导
2401_82546228的博客
04-23 835
本文档介绍应用性能分析工具CPU Profiler的使用方法，该工具为开发者提供性能采样分析手段，可在不插桩情况下获取调用栈上各层函数的执行时间，并展示在时间轴上。
OpenHarmony实战开发-创建列表 (List)
2401_82546228的博客
04-26 824
列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。
OpenHarmony实战开发-form开发指导
m0_70749039的博客
04-29 395
form是一个表单容器，支持容器内Input组件内容的提交和重置。
OpenHarmony 实战开发——自测试执行框架
m0_70748458的博客
04-30 1120
以下是开发自测试框架的目录层级架构，在使用开发自测试框架过程中可在相应目录查找对应组件。test # 测试子系统├── developer_test # 开发者自测试框架│ ├── aw # 测试框架的静态库│ ├── config # 测试框架配置│ │ │ ...│ │ └── user_config.xml # 用户使用配置│ ├── examples # 测试用例示例│ ├── src # 测试框架源码│ ├── third_party # 测试框架依赖第三方组件适配。
OpenHarmony实战开发——宿舍全屋智能开发指南
maniuT的博客
05-20 1035
基于OpenAtom OpenHarmony（以下简称“OpenHarmony”）、数字管家开发宿舍全屋智能，实现碰一碰开门、碰一碰开灯、碰一碰开风扇以及烟感检测。因为各项目开发流程大体相似，本文主要以碰一碰开门为例介绍如何在现有OpenHarmony开源代码的基础上实现我们想要的功能。需要提前准备的设备：搭载HarmonyOS系统的手机一台，API 6+；搭载Hi3861模组的主板，不限于HiSpark、小熊派套件；7.4V电池、一个舵机、若干导线。
【鸿蒙实战开发】OpenHarmony构建编译实战
HarmonyOS_666的博客
08-02 575
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
【OpenHarmony实战开发】三方库material-dialogs：配置自定义的对话框
HarmonyOS_666的博客
07-17 604
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
OpenHarmony开发实战：ArkUI案例-列表项的新增和删除规范
DMZDAMS的博客
07-21 564
列表的编辑模式用途十分广泛，常见于待办事项管理、文件管理、备忘录的记录管理等应用场景。
OpenHarmony开发实战：HDF驱动开发实例
m0_64422261的博客
06-28 1286
基于HDF框架的驱动开发主要分为三个部分：驱动实现、驱动编译脚本编写和驱动配置。详细开发流程如下所示：
OpenHarmony实战开发-创建轮播 (Swiper)
2401_82546228的博客
04-26 1085
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
OpenHarmony实战开发-多利用native的方式实现跨线程调用。
2401_82546228的博客
04-21 1323
在OpenHarmony应用开发实践中，经常会遇到一些耗时的任务，如I/O操作、域名解析以及复杂计算等。这些任务如果直接在主线程中执行，将会严重阻塞主线程，影响后续任务的正常流程，进而导致用户界面响应延迟甚至卡顿。因此，为了提升代码性能，通常会将这类耗时任务放在子线程中执行。本文将聚焦于如何利用native的方式实现跨线程调用，即采用线程安全函数和libuv异步I/O工具库这两种策略，来优化程序性能并保持流畅的用户体验。
OpenHarmony实战开发-弹性布局 (Flex)
2401_82546228的博客
04-26 368
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
OpenHarmony实战开发-分布式数据管理
2401_82546228的博客
04-02 1132
本示例展示了在eTS中分布式数据管理的使用，包括KVManager对象实例的创建和KVStore数据流转的使用。
OpenHarmony实战开发-button开发指导
2401_82546228的博客
04-29 862
button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
鸿蒙OS promptAction的使用
老邓头
08-23 512
鸿蒙OS 开发 promptAction.openCustomDialogd 的使用
理解 HarmonyOS 中的网格布局：综合指南
A1551143530的博客
08-24 1269
网格布局是创建响应式和结构化用户界面的强大工具。通过将界面划分为由行和列组成的单元格，网格可以精确控制组件的分布和对齐。这使得它们成为各种应用程序（例如图库、日历和计算器）的理想选择。在 HarmonyOS 中，ArkUI 提供了用于构建网格布局的Grid容器和GridItem组件。Grid组件用于定义网格的结构，而GridItem组件指定每个单元格内的内容。HarmonyOS 网格支持条件渲染、循环渲染和延迟加载等高级功能，以高效处理大型数据集。
【HarmonyOS NEXT星河版开发实战】灯泡定时开关
最新发布
2302_80329073的博客
08-24 526
该案例是一个小型的娱乐项目，主要是定时器的应用。功能并不是很强大，只是简单图片的变化。有兴趣的小伙伴们可以根据界面效果自己进行实现。头部有倒计时的数字，此案例是以三秒举例，当点击开关时开始计时，同时灯泡会变成红色，等倒计时结束后灯泡会重新变暗。
HarmonyOS NEXT 地图服务中‘我的位置’功能全解析
白晓明的博客
08-24 2050
目前有两种方式可用于在地图上显示我的位置。推荐采用安全控件`LocationButton`方式，此方式能够临时获取精准定位权限，无需进行权限弹框授权确认。另一种方式则是申请授权方式，该方式需要动态向用申请设备位置信息`ohos.permission.LOCATION`和设备模糊位置信息`ohos.permission.APPROXIMATELY_LOCATION`两个权限。
OpenHarmony-3.2-Beta2官方文档地址
06-09
OpenHarmony-3.2-Beta2的官方文档地址是https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start.md，你可以在这里查找和获取OpenHarmony-3.2-Beta2的相关文档和资料。希望这个信息对你有所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值