HarmonyOS 自定义弹窗 (CustomDialog)问题

import router from '@ohos.router';  
@Entry  
@Component  
struct First {  
  // 显隐控制设置为不占用  
  @State visible: Visibility = Visibility.None  
  build() {  
    // 使用stack可以实现假的dialog覆盖原页面上面  
    Stack() {  
      Row() {  
        // 初始页面  
        Column() {  
          // 触发dialog的地方  
          Button('click').onClick(() => {  
            //用于检测点击事件是否透传到原来的页面，是符合dialog规范  
            console.log("hit me!")  
            if (this.visible == Visibility.Visible) {  
              this.visible = Visibility.None  
            } else {  
              this.visible = Visibility.Visible  
            }  
          }).fontColor(0x000000)  
        }.width('100%')  
      }.height('100%')  
      Column() {  
        // 这个可以调节对话框效果，栅格布局，xs，sm，md，lg分别为四种规格  
        // 下面的breakpoints是用来区别当前属于哪个类型的断点。gridRow里的栅格数量为总数，gridCol里的就是偏移和假Dialog所占据的栅格数  
        GridRow({  
          columns: {xs: 1,sm: 4,md: 8,lg: 12},  
          breakpoints: {  
            value: ["400vp", "600vp", "800vp"],  
            reference: BreakpointsReference.WindowSize  
          },  
        }) {  
          GridCol({  
            span: {xs: 1,sm: 2,md: 4,lg: 8},  
            offset: {xs: 0,sm: 1,md: 2,lg: 2}  
          }) {  
            // 这里放的就是原Dialog里的column里的东西，稍微改改应该就可以用了  
            Column() {  
              Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })  
              Flex({ justifyContent: FlexAlign.SpaceAround }) {  
                Button('cancel').onClick(() => {  
                  if (this.visible == Visibility.Visible) {  
                    this.visible = Visibility.None  
                  } else {  
                    this.visible = Visibility.Visible  
                  }  
                }).backgroundColor(0xffffff).fontColor(Color.Black)  
                Button('jump').onClick(() => {  
                  router.pushUrl({ url: 'pages/Page1' })  
                }).backgroundColor(Color.Black).fontColor(Color.Red)  
              }.margin({ bottom: 10 })  
            }.backgroundColor(Color.Grey).visibility(this.visible).clip(true).borderRadius(20)  
          }  
        }  
      }.width('95%') //设置弹窗宽度  
    }  
  }  
}

@Component  
export struct PrivacyDialog {  
  @Consume('pageInfo') pageStack : NavPathStack;  
  @State isAgree: string = "Not Agree";  
  build() {  
    NavDestination(){  
      Stack({ alignContent: Alignment.Center }){  
        // 蒙层  
        Column() {  
        }  
        .width("100%")  
        .height("100%")  
        .backgroundColor('rgba(0,0,0,0.5)')  
        // 隐私弹窗  
        Column() {  
          Text("注册应用账号").fontSize(30).height('20%')  
          Text("请您仔细阅读一下协议并同意，我们将全力保护您的个人信息安全，您可以使用账号登录APP。").height('40%')  
          Divider()  
          Row(){  
            // 点击隐私条款，跳转到隐私条款页面，并接受隐私条款的返回值，用来刷新页面的同意状态。  
            Text("《应用隐私政策》").onClick(ent => {  
              let pathInfo : NavPathInfo = new NavPathInfo('PrivacyItem', null  
                , (popInfo: PopInfo) => {  
                  this.isAgree = popInfo.result.toString();  
                })  
              this.pageStack.pushDestination(pathInfo, true)  
            })  
            Text(this.isAgree)  
          }.height('20%')  
          Divider()  
          // 点击同意不同意按钮，将状态返回登录页  
          Row(){  
            Button("不同意").onClick(ent => {  
              this.pageStack.pop("Not Agree", true)  
            }).width('30%')  
            Button("同意").onClick(ent => {  
              this.pageStack.pop("Agree", true)  
            }).width('30%')  
          }.height('20%')  
        }.backgroundColor(Color.White)  
        .height('50%')  
        .width('80%')  
      }  
    }.hideTitleBar(true)  
    // 设置Dialog类型  
    .mode(NavDestinationMode.DIALOG)  
  }  
}