如何删除多选框选项？

【问题描述】

我想实现这样的效果：使用多选框Checkbox，当选中选项后，点击删除弹出确认框，点击确认删除选项。但是，当前OpenHarmony针对多选框组件并没有提供直接的删除其选项的方法，应该如何实现呢？

我的代码：

@Entry
@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)
  }
}

效果图：

【运行环境】

● IDE: DevEco Studio 4.0 Beta1

● SDK: Ohos_sdk_public 4.0.7.5 (API Version 10 Beta1)

实现类似效果，我们一般是按照这样的思路进行开发：

1.  多选框：使用CheckboxGroup组件构建多选框标题，使用Checkbox组件构建多选框选项。

2.  删除多选框选项：通过CheckboxGroup的onChange回调获取到各个选项的选中状态，在删除操作中，将选中的选项从选项列表中删除。

3.  删除时弹出确认框：使用promptAction模块调用showDialog方法弹出对话框，通过回调获取到用户点击的是取消按钮还是确定按钮，如果是确定按钮则执行删除操作。

完整代码：

1. import promptAction from '@ohos.promptAction';
   
2. 
   
3. @Entry
   
4. @Component
   
5. struct CheckboxDemo{
   
6.   @State flexNameList:string[] = ['苹果','菠萝','柚子']
   
7.   private itemStatus:CheckboxGroupResult
   
8.   @Builder
   
9.   flexItem(checkboxName:string,groupName:string){
   
10.     Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    
11.       Checkbox({ name:checkboxName, group:groupName})
    
12.         .selectedColor('#007DFF')
    
13.       Text(checkboxName)
    
14.         .margin({right:20})
    
15.         .fontSize(14)
    
16.         .lineHeight(20)
    
17.         .fontColor('#182431')
    
18.         .fontWeight(500)
    
19.     }.margin({ left: 36 })
    
20.   }
    
21. 
    
22.   build() {
    
23.     Column() {
    
24.       if (this.flexNameList.length != 0){
    
25.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    
26.           CheckboxGroup({ group: 'fruit_list' })
    
27.             .selectedColor('#007DFF')
    
28.             .onChange((itemName: CheckboxGroupResult) => {
    
29.               this.itemStatus = itemName
    
30.             })
    
31.           Text('水果清单')
    
32.             .margin({right:20})
    
33.             .fontSize(14)
    
34.             .lineHeight(20)
    
35.             .fontColor('#182431')
    
36.             .fontWeight(FontWeight.Bold)
    
37.         }.margin({top:150})
    
38. 
    
39.         ForEach(this.flexNameList,(item:any)=>{
    
40.           this.flexItem(item,'fruit_list')
    
41.         })
    
42. 
    
43.         Button("删除")
    
44.           .margin({top:20,left:35})
    
45.           .fontSize(15)
    
46.           .padding({top:5,bottom:5,left:15,right:15})
    
47.           .onClick(()=>{
    
48.             promptAction.showDialog({
    
49.               title:'',
    
50.               message:'确定删除吗？',
    
51.               buttons:[
    
52.                 {text:'取消', color:'#000000'},
    
53.                 {text:'确定', color:'#000000'}
    
54.               ]
    
55.             })
    
56.               .then(data=>{
    
57.                 if(data.index===1){
    
58.                   for(let i of this.itemStatus.name){
    
59.                     this.flexNameList.splice(this.flexNameList.indexOf(i),1)
    
60.                   }
    
61.                 }
    
62.               })
    
63.           })
    
64.       }else{
    
65. 
    
66.       }
    
67.     }.alignItems(HorizontalAlign.Center)
    
68.   }
    
69. }
    

复制代码