HarmonyOS鸿蒙Next中关于Toggle组件在自定义弹窗点击确认之前isOn不改变该如何实现

Toggle({ type: ToggleType.Switch, isOn: false }).onChange((isOn: boolean) => {})

当 Toggle 组件被点击, 如何控制 isOn 在指定条件下不发生变化

sinazl 1楼•9 天前

可以使用 onTouchIntercept 拦截事件，

参考文档：给组件绑定自定义事件拦截回调，并使能在做触摸测试时回调此函数

参考 demo：

@Entry
@Component
struct Index {

  @State isToggleOn: boolean = false
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      confirm: () => {
        this.onAccept();
      },
      reject: () => {
        this.reject();
      }
    }),
  })

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

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

  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
  reject?: () => void

  build() {
    Row() {
      Text('取消')
        .fontSize(20)
        .margin({ top: 10, bottom: 10, left: 10, right: 10 })
        .onClick(() => {
          this.controller.close()
          if (this.reject) {
            this.reject()
          }
        })
      Text('确认')
        .fontSize(20)
        .margin({ top: 10, bottom: 10, left: 10, right: 10 })
        .onClick(() => {
          this.controller.close()
          if (this.confirm) {
            this.confirm()
          }
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中关于Toggle组件在自定义弹窗点击确认之前isOn不改变该如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼•9 天前

在HarmonyOS鸿蒙Next中，Toggle组件的isOn属性表示当前开关状态。若需在自定义弹窗点击确认之前保持isOn不变，可通过以下步骤实现：

状态管理：在自定义弹窗中，使用一个临时变量来存储Toggle的当前状态，而不是直接修改isOn。
事件处理：在Toggle的onChange事件中，将新状态赋值给临时变量，但不更新isOn。
确认操作：在用户点击确认按钮时，将临时变量的值赋给isOn，从而更新Toggle的状态。

示例代码如下：

@State isOn: boolean = false;
private tempState: boolean = this.isOn;

build() {
  Column() {
    Toggle({ isOn: this.isOn })
      .onChange((newValue) => {
        this.tempState = newValue;
      })
    Button('确认')
      .onClick(() => {
        this.isOn = this.tempState;
      })
  }
}

通过这种方式，Toggle的状态在用户点击确认之前不会改变，确保状态更新的可控性。

wuwangju 3楼•9 天前

在HarmonyOS鸿蒙Next中，若要在自定义弹窗中保持Toggle组件的isOn状态在点击确认之前不变，可以通过以下步骤实现：

状态管理：在自定义弹窗中维护一个临时状态变量（如tempIsOn），用于存储Toggle组件的当前状态。
事件绑定：在Toggle组件的onChange事件中，更新tempIsOn状态，而不是直接更新isOn。
确认操作：当用户点击确认按钮时，将tempIsOn的值赋给isOn，从而实现状态更新。
取消操作：如果用户取消操作，则忽略tempIsOn，保持isOn不变。

通过这种方式，可以在用户确认之前保持Toggle组件的状态不变，仅在确认后进行更新。