HarmonyOS 如何穿透 NavDestination 透明弹窗，点击到页面内容

navDestination 宽高自适应内容区域使用 auto

navDestination 位置居中可以使用positon + translate

参考代码如下：

NavDestination(){}
.height('auto')
.width('auto')
.position({left:px2vp(screenWidth/2),top: px2vp(screenHeight/2)}) // 偏移屏幕一半
.translate({x:'-50%',y:'-50%'}) // 修正位置
.mode(NavDestinationMode.DIALOG)

完整代码如下：

import display from '@ohos.display';
import { BusinessError } from '@kit.BasicServicesKit';

let screenWidth = 0;
let screenHeight = 0;

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

  aboutToAppear() {
    display.getAllDisplays((err: BusinessError, data: Array<display.Display>) => {
      const errCode: number = err.code;
      screenWidth = data[0].width
      screenHeight = data[0].height
    });
  }

  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }

  build() {
    Column() {
      Navigation(this.pageStack) {
        Button('Open DialogPage')
          .margin(20)
          .onClick(() => {
            this.pageStack.pushPathByName('DialogPage', '');
          })

        Button('click')
          .onClick(() => {
            console.log('click btn')
          })
      }
      .mode(NavigationMode.Stack)
      .navDestination(this.PagesMap)
    }
  }
}

@Component
export struct DialogPage {
  @Consume('NavPathStack') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text("toast content")
            .fontSize(20)
          Button("Close").onClick(() => {
            this.pageStack.pop()
          }).width('30%')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .borderWidth(2)
        .width('200')
      }
    }
    .height('auto')
    .width('auto')
    .position({left:px2vp(screenWidth/2),top: px2vp(screenHeight/2)}) // 偏移屏幕一半
    .translate({x:'-50%',y:'-50%'}) // 修正位置
    .mode(NavDestinationMode.DIALOG)
    .hideTitleBar(true)
    .onBackPressed((): boolean => {
      return true;
    })
  }
}