HarmonyOS鸿蒙Next DialogHub创建的弹窗如何显示在dialog之上？

HarmonyOS鸿蒙Next DialogHub创建的弹窗如何显示在dialog之上？

DialogHub创建的弹窗属于overlay，会被customdialog弹窗覆盖，有什么方法让dialoghub弹窗显示在customdialog上吗？

3 回复

CustomDialog的默认层级高于页面，可以使用NavDestination的Dialog模式实现实现customdialog弹窗，再调用dialoghub弹窗。

【解决方案】

NavDestinationMode.DIALOG实现自定义弹窗方案，示例代码如下：

创建Navigation根页面：

@Entry
@Component
struct Index {
 @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();

 build() {
   Navigation(this.pathStack) {
     Column() {
       Button('Navigation页')
         .onClick(() => {
           this.pathStack.pushPathByName('Index2', null)
         })
         .backgroundColor(0x777474)
         .fontColor(0x000000)
     }
     .width('100%')
     .height('100%')
   }
   .mode(NavigationMode.Auto)
   .width('100%')
   .height('100%')
 }
}

创建Index2子页面，并定义到弹窗页面的路由：

@Builder
export function Index2Builder() {
 Index2()
}

@Component
export struct Index2 {
 @Consume('pathStack') pathStack: NavPathStack;

 build() {
   NavDestination() {
     Row() {
       Column() {
         Button('click')
           .onClick(() => {
             this.pathStack.pushPathByName('CustomDialog', ''); // 推送弹窗页面
           })
           .backgroundColor(0x777474)
           .fontColor(0x000000)
       }
       .width('100%')
     }
     .height('100%')
     .backgroundColor(0x885555)
   }
   .title('Index2')
 }
}

创建并自定义CustomDialog子页面，并定义到Index3页面的路由：

@Builder
export function CustomDialogBuilder() {
 CustomDialog()
}

@Component
export struct CustomDialog {
 @Consume('pathStack') pathStack: NavPathStack;

 build() {
   NavDestination() {
     Stack({ alignContent: Alignment.Center }) {
       Text('123123') // 弹窗遮罩
         .onClick(() => {
           this.pathStack.pop() // 点击遮罩散出该页面，达到关闭弹窗效果
         })
         .width('100%')
         .height('100%')
         .opacity(0.1) // 遮罩透明度调节
         .backgroundColor(0x000000)
       Column() {
         Text('我是自定义弹窗')
         Button('jump')
           .onClick(() => {
             this.pathStack.pushPathByName('Index3', ''); // 弹窗内推送Index3页面
           }).backgroundColor(0xffffff).fontColor(Color.Red)
       }
       .justifyContent(FlexAlign.Center)
       .backgroundColor(Color.White)
       .borderRadius(10)
       .height(100)
       .width('95%')
     }.height('100%').width('100%')
   }
   .backgroundColor('rgba(0,0,0,0.5)')
   .hideTitleBar(true)
   .mode(NavDestinationMode.DIALOG)
 }
}

创建Index3子页面：

@Builder
export function Index3Builder() {
 Index3()
}

@Component
struct Index3 {
 @Consume('pathStack') pathStack: NavPathStack;

 build() {
   NavDestination() {
     Text('Index3')
       .width('100%')
       .height('100%')
       .backgroundColor(Color.Blue)
   }
   .title('Index3')
 }
}

更多关于HarmonyOS鸿蒙Next DialogHub创建的弹窗如何显示在dialog之上？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，要使DialogHub创建的弹窗显示在已有dialog之上，可通过设置zIndex属性实现。DialogHub的showDialog方法支持传入zIndex参数，数值越大层级越高。示例：

DialogHub.showDialog({
  zIndex: 1001, // 高于默认dialog的zIndex(如1000)
  // 其他配置
});

若需动态调整，可通过DialogHub.getDialogInfo获取当前dialog的zIndex后增量设置。注意同一Context内zIndex需唯一。

在HarmonyOS Next中，要让DialogHub创建的弹窗显示在CustomDialog之上，可以通过调整窗口层级(z-order)来实现。具体方法如下：

  1. 使用WindowManager的addWindow接口时，通过WindowOption设置更高的zOrder属性值。DialogHub弹窗的zOrder需要大于CustomDialog的zOrder值。

  2. 在创建DialogHub弹窗时，明确指定窗口类型为系统窗口类型(如TYPE_SYSTEM_ALERT)，这类窗口默认具有更高的显示层级。

  3. 检查是否在CustomDialog的WindowOption中设置了modal属性为true，这会导致它拦截下层窗口的交互。可以尝试将modal设为false。

  4. 确保DialogHub弹窗和CustomDialog使用相同的窗口管理器实例，避免因不同的WindowManager实例导致层级管理不一致。

注意：过度提高窗口层级可能会影响系统正常的交互流程，建议仅在确实需要时才调整窗口层级关系。

回到顶部