HarmonyOS toggle 点击拦截

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

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

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

HarmonyOS

Heiang

2024-12-20 17:23:23

浏览

回答 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()
          }
        })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.