#鸿蒙学习大百科#如何实现一个弹窗类型的NavDestination？

import { DialogPage } from '../ui/DialogPage'

@Entry
@Component
struct Index {
  // 创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = new NavPathStack()
  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }
  build() {
    Column() {
      Navigation(this.pageStack) {
        Button("弹窗").onClick(() => {
          this.pageStack.pushPathByName("DialogPage","")
        })
      }.navDestination(this.PagesMap)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
export struct DialogPage {
  build() {
    NavDestination() {
      Column() {
        Text("这是弹窗Page")
          .height("50%")
          .width("80%")
          .borderRadius(10)
          .backgroundColor(Color.White)
      }.height("100%").width('100%')
      .justifyContent(FlexAlign.Center)
    }.mode(NavDestinationMode.DIALOG)
    .backgroundColor('rgba(0,0,0,0.5)')//背景默认透明，所以需要设置一个背景颜色
    .hideTitleBar(true)
  }
}