#鸿蒙通关秘籍#如何在HarmonyOS Next中使用Navigation.Dialog实现自定义弹窗效果

在HarmonyOS Next中，通过使用Navigation.Dialog可以实现自定义弹窗效果。首先，需基于Navigation.Dialog的透明页面特性实现弹窗效果，还可以通过将它加入路由栈，从而自然地实现页面切换时弹窗不消失的效果。

初始配置代码如下：

export class AppRouter {
  private static instance = new AppRouter();
  private pathStack: NavPathStack = new NavPathStack();

  public static getInstance(): AppRouter {
    return AppRouter.instance;
  }

  public getPathStack(): NavPathStack {
    return this.pathStack;
  }
}

在根页面中注册：

@Entry
@Component
struct Index {
  build() {
    Navigation(AppRouter.getInstance().getPathStack()) {
      ...
    }
  }
}

通过.navDestination注册自定义的弹窗组件：

@Builder
PageMap(name: string) {
  if (name === CommonConstants.DEFAULT_DIALOG) {
    DefaultDialog()
  }
  ...
}

Navigation(AppRouter.getInstance().getPathStack()) {
  ...
}.navDestination(this.PageMap)