HarmonyOS鸿蒙Next中Navigation弹窗关闭时在onPop回调中去弹窗新的Navigation弹窗

HarmonyOS鸿蒙Next中Navigation弹窗关闭时在onPop回调中去弹窗新的Navigation弹窗 Navigation 弹窗关闭时在onPop 回调中去弹窗新的Navigation弹窗时，会出现弹窗不会关闭。附件有效果视频

3 回复

原页面未出栈就把新页面压入栈中，导致出现了问题现象，可以在onpop方法中使用延迟入栈的方式来规避此问题：

import { Pages } from "../base/PageRouter";

@Component
export struct FirstPage {
@Consume("pathStack") pathStack: NavPathStack;

build() {
NavDestination() {
RelativeContainer() {
Column() {
Text("FirstPage").fontSize(50)
.fontWeight(FontWeight.Bold)

Button("SecondPage")
.onClick(() => {
this.pathStack.pushPath({
name: Pages.SECOND_PAGE,
onPop: (pop: PopInfo) => {
let result = pop.result
if (result == 1) {
setTimeout(() => {
this.pathStack.pushPath({ name: Pages.THIRD_PAGE })
}, 50)
}
}
})
.margin({ top: 100 })
}
.width("80%")
.height("50%")
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center },
})
}.onClick(() => {
this.pathStack.pop();
})
.width('100%')
.height('auto')

}
.width('100%')
.height('100%')
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
.backgroundColor("#99000000")
}
}

更多关于HarmonyOS鸿蒙Next中Navigation弹窗关闭时在onPop回调中去弹窗新的Navigation弹窗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Navigation组件的onPop回调用于处理页面回退时的逻辑。若在onPop回调中直接弹出新的Navigation弹窗，可能会导致页面栈管理混乱或UI渲染异常。建议在onPop回调中通过异步任务或延迟操作来处理新弹窗的弹出，以确保页面栈的稳定性和UI的正常渲染。

这是一个典型的弹窗生命周期管理问题。在HarmonyOS Next中，当在onPop回调中直接触发新弹窗时，由于前一个弹窗的关闭动画尚未完成，会导致新弹窗无法正常显示。

解决方案建议：

  1. 使用setTimeout或requestAnimationFrame延迟新弹窗的触发
  2. 考虑使用Promise或async/await确保前一个弹窗完全关闭
  3. 检查Navigation组件的z-index设置

示例代码：

onPop() {
  setTimeout(() => {
    // 在这里触发新弹窗
  }, 100); // 适当延迟
}

或者使用Promise：

async onPop() {
  await new Promise(resolve => setTimeout(resolve, 100));
  // 触发新弹窗
}

注意调整延迟时间以适应动画时长。

回到顶部