HarmonyOS toggle 点击拦截

需toggle点击后滑块不动,触发回调,这里会弹窗,根据弹窗中异步逻辑,再变动toggle isOn状态。

当前为找到有点击拦截事件,支持这种业务需求。

如果将toggle enable设置为false,再在上面加点击透明层,可以实现滑块不动的效果,但toggle enable为false时会自带白色半透明蒙层,影响视觉效果。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以使用onTouchIntercept拦截事件,参考demo:

@Entry
@Component
struct Page240522215803016 {
  @State message: string = 'Hello World';
  @State isToggleOn: boolean = false
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      confirm: () => {
        this.onAccept()
      },
    }),
  })

  onAccept() {
    if (this.isToggleOn) {
      this.isToggleOn = false
    }else {
      this.isToggleOn = true
    }

  }

  build() {
    RelativeContainer() {
      Toggle({ type: ToggleType.Switch, isOn: this.isToggleOn })// 调用onTouchIntercept修改该组件的HitTestMode属性
        .onTouchIntercept((event: TouchEvent) => {
          console.log("OnTouchIntercept + " + JSON.stringify(event));
          this.dialogController.open()
          return HitTestMode.None
        })
        .onChange((isOn: boolean) => {
          console.info("isOn:" + isOn)
          if (isOn) {
            // 需要执行的操作
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  confirm?: () => void

  build() {
    Column() {
      Text('点击确认')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.controller.close()
          if (this.confirm) {
            this.confirm()
          }
        })
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Toggle组件怎么拦截
392浏览 • 1回复 待解决
Slider拦截点击事件失败
286浏览 • 1回复 待解决
如何去掉Toggle一类控件的点击效果
431浏览 • 1回复 待解决
HarmonyOS Toggle问题
521浏览 • 0回复 待解决
HarmonyOS WebView拦截网络请求
459浏览 • 1回复 待解决
HarmonyOS toggle组件是否支持完全受控
450浏览 • 0回复 待解决
HarmonyOS web组件怎么拦截请求
576浏览 • 1回复 待解决
如何拦截onConfigurationChanged
5039浏览 • 1回复 待解决
HarmonyOS UI组件事件拦截处理
397浏览 • 1回复 待解决