如何删除多选框选项

场景说明

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

效果呈现

本例最终效果如下：

delete-checkboxitem

运行环境

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

  • IDE: DevEco Studio 4.0 Beta1
  • SDK: Ohos_sdk_public 4.0.7.5 (API Version 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)
  }
}

参考