HarmonyOS CustomDialog里面使用router.push，dialog被关闭？

Question

@Preview
@CustomDialog
export struct UserAgreeConfirmDialog {
  controller?: CustomDialogController
  onExitListener?: () => void
  onAgreeListener?: () => void

  build() {
    Column() {
      Text("用户协议及隐私保护")
        .fontSize(18)
        .fontColor($r("app.color.color_333333"))
        .fontWeight(FontWeight.Medium)
        .margin({ top: 15 })
      Text() {
        Span("为保障您的合法权益，请阅读并同意").fontSize(15).fontColor($r('app.color.color_333333'))
        Span("《用户协议》").fontSize(15).fontColor($r('app.color.color_2abddd')).onClick(() => {
          let options: router.RouterOptions = {
            url: 'pages/WebPage',
            params: new toWebViewPageRouterParams(ServiceUrls.SERVICE_URL, "用户协议")
          }
          router.pushUrl(options)
        })
        Span("以及").fontSize(15).fontColor($r('app.color.color_333333'))
        Span("《隐私政策》").fontSize(15).fontColor($r('app.color.color_2abddd')).onClick(() => {
          let options: router.RouterOptions = {
            url: 'pages/WebPage',
            params: new toWebViewPageRouterParams(ServiceUrls.PROTOCOL_URL, "隐私政策")
          }
          router.pushUrl(options)
        })

      }.margin({ top: 25 })
      .width("80%")

      Text("严格保护您的个人信息安全")
        .fontSize(15)
        .margin({ top: 25 })
        .width("80%")
      Button('同意并登录', { type: ButtonType.Capsule, stateEffect: false })
        .opacity(1)
        .borderRadius(4)
        .backgroundColor($r('app.color.color_E0433B'))
        .onClick(() => {
          console.log('ButtonType.Normal')
        })
        .height(46)
        .width("90%")
        .flexShrink(1)
        .fontSize(15)
        .fontColor($r('app.color.white'))
        .margin({ top: 20 })
        .onClick(() => {
          if (this.onAgreeListener) {
            this.onAgreeListener()
          }
        })
      Text("不同意")
        .fontColor($r('app.color.color_8F8F8F'))
        .fontSize(15)
        .margin({ top: 15, bottom: 15 })
        .onClick(() => {
          // if (this.onExitListener) {
          //   this.onExitListener()
          // }
        })
    }.width("80%")
    .backgroundColor($r('app.color.white'))
    .borderRadius({ topLeft: 6, topRight: 6, bottomLeft: 6, bottomRight: 6 })
  }
}

Answer 1

目前有两种方案实现：

方案1：通过Stack容器结合其它组件，使用UI组件模拟Dialog的效果，简单示例：

Stack() { // 原页面内容 Column(){...} // 模拟遮罩层 
  Text('').width('100%').height('100%').opacity(0.16) // 透明度可以自己调节一下 
    .backgroundColor(0x000000).visibility(this.visible) // 此处是原Dialog中的内容，使用UI组件模拟Dialog 
  Column(){...} } 

方案2：在页面的onPageShow()这个生命周期方法中调用open()方法打开，简单示例：

@Entry
@Component
struct Demo {
  @State flag: boolean = false
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDia({  //CustomDia是的自定义弹窗组件
      cancel: this.onCancel,
      confirm: this.onConfirm,
      jumpPage: this.jumpPage
    }),
    alignment: DialogAlignment.Center
  })
  onPageShow(): void {
    if (this.dialogController != null && this.flag) {
      this.dialogController.open()
    }
  }
  onPageHide(): void {
    if (this.dialogController != null) {
      this.dialogController.close()
    }
  }
  build() {
    Column() {
      Button('第一个页面').onClick(() => {
        if (this.dialogController != null) {
          this.flag = true
          this.dialogController.open()
        }
      })
    }
    .width('100%')
    .height('100%')

  }
  jumpPage() {
    router.pushUrl({
      url: 'pages/Index'
    })
  }
  onConfirm() {
    console.info('------>onConfirm is clicked')
  }
  onCancel() {
    console.info('------>onCancel is clicked')
  }
  aboutToDisappear(): void {
    this.dialogController = null
  }
}