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

场景说明

通常情况下，我们使用多选框都会伴随对选项的操作，比较常见的操作是选中后删除，比如删除购物车的商品、删除账单、删除图片等等。但是，当前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('删除')
    }
  }
}

框架搭好了，看下效果：

可以看到主选框和选项对齐了，接下来我们来调整下样式。 先给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'}