HarmonyOS鸿蒙Next中半模态弹窗拉起正常出现在半模态弹窗前面，但是快速点击时出现在半模态后面，层级关系不符预期，怎么解决？

HarmonyOS鸿蒙Next中半模态弹窗拉起正常出现在半模态弹窗前面，但是快速点击时出现在半模态后面，层级关系不符预期，怎么解决？ 如题，我构造了一个展示弹窗的函数：

private showCommonDialog(defaultErrorMessage: string | Resource) {
  if (this.dialogCommonController === undefined) {
    this.dialogCommonController = new CustomDialogController({
      builder: AlertDialog({
        primaryTitle: 
        content: defaultErrorMessage,
        primaryButton: {
          value: 
          action: () => {
            
          }}, 200);
        }
      },
      secondaryButton: {
        value: 
        action: () => {
          
        }
      }
    }),
    autoCancel: false,
    showInSubWindow: true,
  })
}
this.dialogCommonController?.open();

然后我在半模态的一个按钮控件里面调用它：

Button($r('app.string.pi_stop_service'))
  .fontColor(ColorUtil.getColorWarning())
  .width('100%')
  .backgroundColor(ColorUtil.getColorButtonNormal())
  .onClick(() => {      
this.showCommonDialog($r(''));
})

正常点击会弹在半模态上面，如果快速连续狂按按钮和弹框的取消，就会使弹窗弹在半模态下面，如何解决求助大神!


更多关于HarmonyOS鸿蒙Next中半模态弹窗拉起正常出现在半模态弹窗前面，但是快速点击时出现在半模态后面，层级关系不符预期，怎么解决？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

方案1、通过这个opencustomdialog接口整改下，弹窗指定上下文

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12-1

方案2、builder里面可直接套AlertDialog，示例：

https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Dialog.md#%E7%A4%BA%E4%BE%8B4%E7%BA%AF%E6%96%87%E6%9C%AC%E5%BC%B9%E5%87%BA%E6%A1%86

更多关于HarmonyOS鸿蒙Next中半模态弹窗拉起正常出现在半模态弹窗前面，但是快速点击时出现在半模态后面，层级关系不符预期，怎么解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，半模态弹窗的层级关系异常可能是由于快速点击导致的事件队列处理不及时。可以通过优化事件处理逻辑，确保弹窗的显示顺序符合预期。检查弹窗的显示时机和事件触发机制，避免在快速操作时出现层级错乱。使用合适的API或回调函数来确保弹窗的正确显示顺序，避免事件冲突。

这个问题是由于快速点击导致的弹窗层级管理冲突。建议采用以下解决方案：

  1. 在showCommonDialog方法中添加防抖处理，防止快速多次触发：
private isDialogShowing = false;

private showCommonDialog(defaultErrorMessage: string | Resource) {
    if (this.isDialogShowing) return;
    
    this.isDialogShowing = true;
    
    if (this.dialogCommonController === undefined) {
        // 原有代码...
    }
    
    this.dialogCommonController?.open().then(() => {
        this.isDialogShowing = false;
    });
}
  1. 或者使用Promise确保前一个弹窗完全关闭后再打开新的：
private dialogPromise = Promise.resolve();

private showCommonDialog(defaultErrorMessage: string | Resource) {
    this.dialogPromise = this.dialogPromise.then(async () => {
        if (this.dialogCommonController === undefined) {
            // 原有代码...
        }
        await this.dialogCommonController?.open();
    });
}

这两种方案都能有效避免快速点击导致的层级错乱问题。

回到顶部