HarmonyOS 自定义弹窗中跳转页面，弹窗仍然显示在页面之上？

Question

在页面A使用openCustomDialog<T extends Object\>(dialogContent: ComponentContent<T\>, options?: promptAction.BaseDialogOptions)这个接口创建出来的弹窗，在弹窗内跳转页面B，效果是弹窗还显示在页面B之上，需求是希望页面B在弹窗之上，并且回到页面A时弹窗还在。

1、为什么用这个接口创建出来的弹窗会显示在页面之上？我使用了页面A的UIContext创建ComponentContent，那这个弹窗不应该只在页面A展示吗？

2、在不手动关闭弹窗进入页面B的前提下，有办法让页面跳转后，弹窗隐藏或不显示在页面B吗？

简单代码如下：

let componentContent = new ComponentContent(uiContext, contentView, args)
let customOptions: promptAction.CustomDialogOptions = {
  alignment: options?.alignment || DialogAlignment.Bottom,
  autoCancel: options?.autoCancel || false,
  maskColor: options?.maskColor,
  onWillDismiss: (action: DismissDialogAction) => {
    if (options?.onWillDismiss) {
      options.onWillDismiss(action)
    } else {
      if (action.reason == DismissReason.TOUCH_OUTSIDE) {
        action.dismiss()
      }
    }
  },
  onDidAppear: () => {
    if (options?.onDidAppear) {
      options.onDidAppear()
    }
  },
  onDidDisappear: () => {
    if (options?.onDidDisappear) {
      options.onDidDisappear()
    }
  },
  onWillDisappear: () => {
    if (options?.onWillDisappear) {
      options.onWillDisappear()
    }
  },
  builder: ()=>{contentView},
  cornerRadius:{ topLeft: '8vp', topRight: '8vp', bottomLeft: '8vp', bottomRight: '8vp' }
}
let prompt = this.uiContext.getPromptAction()
prompt.openCustomDialog(this.componentContent, this.customOptions)

Answer 1

自定义弹窗目前暂不支持点击跳转之后返回，弹窗还在。想要实现跳的时候希望和正常页面一样跳，返回后弹窗还在，且支持一下动态刷新自定义弹框的参数，可以通过Stack布局来模拟实现Dialog的效果，同时可通过状态变量动态刷新数据

这边提供了一种可以实现路由跳转后弹框的效果：

import { router } from '@kit.ArkUI';
@Entry
@Component
struct DialogFirst {
  @State textValue: string = '请阅读隐私协议'
  // 显隐控制设置为不占用
  @State visible: Visibility = Visibility.None
  onPageShow() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      this.textValue = params.info as string; // 获取info属性的值
    }
  }

  build() {
    Stack() {
      // 初始页面
      Row() {
        Column() {
          Text('Hello World')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          Button('click')
            .onClick(() => {
              console.log("hit me!")
              if (this.visible == Visibility.Visible) {
                this.visible = Visibility.None
              } else {
                this.visible = Visibility.Visible
              }
            })
            .backgroundColor(0x777474)
            .fontColor(0x000000)
        }
        .width('100%')
      }
      .height('100%')
      .backgroundColor(0x885555)

      //加了一个半透明灰色的蒙层效果
      Text('')
        .onClick(() => {
          if (this.visible == Visibility.Visible) {
            this.visible = Visibility.None
          } else {
            this.visible = Visibility.Visible
          }
        })
        .width('100%')
        .height('100%')
        .opacity(0.16)
        .backgroundColor(0x000000)
        .visibility(this.visible)
      Column() {
        Column() {
          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
          TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
            .onChange((value: string) => {
              this.textValue = value
            })
          Text('Whether to change a text?').fontSize(16).margin({ 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/DialogSecond'
                })
              }).backgroundColor(0xffffff).fontColor(Color.Red)
          }.margin({ bottom: 10 })
        }
        .backgroundColor(0xffffff)
        .visibility(this.visible)
        .clip(true)
        .borderRadius(20)
      }.width('95%') //设置弹窗宽度
    }
  }
}



import { router } from '@kit.ArkUI';
@Entry
@Component
struct DialogSecond {
  @State message: string = '点击返回';
  build() {
    Column() {
      Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold).onClick(() => {
        router.back({
          url: 'pages/DialogFirst',
          params: {
            info: '隐私已阅读'
          }
        });
      })
    }.width('100%').height('100%')
  }
}