• Lv0
    粉丝1

积分91 / 贡献0

提问37答案被采纳3文章0

如何删除多选框选项?

一只杨 显示全部楼层 发表于 2023-8-28 14:27:29

【问题描述】

我想实现这样的效果:使用多选框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)
  }
}


效果图:

22.png

【运行环境】

● IDE: DevEco Studio 4.0 Beta1

● SDK: Ohos_sdk_public 4.0.7.5 (API Version 10 Beta1)

您尚未登录,无法参与评论,登录后可以:
参与开源共建问题交流
认同或收藏高质量问答
获取积分成为开源共建先驱

精彩评论1

星辰大海

沙发 发表于 2023-8-28 15:58:48

实现类似效果,我们一般是按照这样的思路进行开发:
1.  多选框:使用CheckboxGroup组件构建多选框标题,使用Checkbox组件构建多选框选项。
2.  删除多选框选项:通过CheckboxGroup的onChange回调获取到各个选项的选中状态,在删除操作中,将选中的选项从选项列表中删除。
3.  删除时弹出确认框:使用promptAction模块调用showDialog方法弹出对话框,通过回调获取到用户点击的是取消按钮还是确定按钮,如果是确定按钮则执行删除操作。
完整代码:
  1. import promptAction from '@ohos.promptAction';

  2. @Entry
  3. @Component
  4. struct CheckboxDemo{
  5.   @State flexNameList:string[] = ['苹果','菠萝','柚子']
  6.   private itemStatus:CheckboxGroupResult
  7.   @Builder
  8.   flexItem(checkboxName:string,groupName:string){
  9.     Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
  10.       Checkbox({ name:checkboxName, group:groupName})
  11.         .selectedColor('#007DFF')
  12.       Text(checkboxName)
  13.         .margin({right:20})
  14.         .fontSize(14)
  15.         .lineHeight(20)
  16.         .fontColor('#182431')
  17.         .fontWeight(500)
  18.     }.margin({ left: 36 })
  19.   }

  20.   build() {
  21.     Column() {
  22.       if (this.flexNameList.length != 0){
  23.         Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
  24.           CheckboxGroup({ group: 'fruit_list' })
  25.             .selectedColor('#007DFF')
  26.             .onChange((itemName: CheckboxGroupResult) => {
  27.               this.itemStatus = itemName
  28.             })
  29.           Text('水果清单')
  30.             .margin({right:20})
  31.             .fontSize(14)
  32.             .lineHeight(20)
  33.             .fontColor('#182431')
  34.             .fontWeight(FontWeight.Bold)
  35.         }.margin({top:150})

  36.         ForEach(this.flexNameList,(item:any)=>{
  37.           this.flexItem(item,'fruit_list')
  38.         })

  39.         Button("删除")
  40.           .margin({top:20,left:35})
  41.           .fontSize(15)
  42.           .padding({top:5,bottom:5,left:15,right:15})
  43.           .onClick(()=>{
  44.             promptAction.showDialog({
  45.               title:'',
  46.               message:'确定删除吗?',
  47.               buttons:[
  48.                 {text:'取消', color:'#000000'},
  49.                 {text:'确定', color:'#000000'}
  50.               ]
  51.             })
  52.               .then(data=>{
  53.                 if(data.index===1){
  54.                   for(let i of this.itemStatus.name){
  55.                     this.flexNameList.splice(this.flexNameList.indexOf(i),1)
  56.                   }
  57.                 }
  58.               })
  59.           })
  60.       }else{

  61.       }
  62.     }.alignItems(HorizontalAlign.Center)
  63.   }
  64. }
复制代码



Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

返回顶部