HarmonyOS 如何实现一个可以在任意界面显示的弹窗？

Question

1、场景是收到服务器通知时显示一个自定义弹窗（可以透过背景看到弹窗底部的界面），这个可能在任意界面触发，但我们不太可能为所有page都增加一个dialogConroller，这个应该如何解决？

2、一些在固定场景使用的自定义弹窗如何让弹窗自己配置options，比如以下配置，当多个page需要这个弹窗时，我们不希望每个page都要配置这些属性，这容易导致业务修改遗漏，应该如何解决？

antiFraudDialog = new CustomDialogController({
  builder: AntiFraudDialog(),
  customStyle: true,
  autoCancel: false,
  openAnimation: { duration: 0 }
});

Answer 1

1.在需要的页面import

import  {LoadingDialogView} from './DialogTest'

2.可以封装弹框

export class TestModel {
  testDialog() {
    let dialogComponent: DialogComponent = new DialogComponent()
    console.log("testDialog start")
    dialogComponent.showDialog()
    console.log("testDialog end")
  }
}

let loadingDialogController: CustomDialogController | null

@Component
export struct DialogComponent {
  showDialog(): void {
    loadingDialogController = new CustomDialogController({
      builder: LoadingDialogView({
        msg:'sssssssss'
      }),
    })
    loadingDialogController?.open()
  }

  build() {
    Column() {
    }
    .justifyContent(FlexAlign.Center)
    .borderRadius(12)
    .width(100)
  }
}

@CustomDialog
struct LoadingDialogView {
  controller: CustomDialogController

  private msg:string = ''
  aboutToAppear(): void {
    console.log(this.msg)
    console.log("LoadingDialogView")
  }
  build() {
    Column() {
      Text('xxxxxxx')
      Image($r('app.media.background')).width(100).height(100)
    }
  }
}

@Entry
@Component
export struct Dialog2 {
  build() {
    Row() {
      Column() {
        Text("this.message")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
              new TestModel().testDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.onWillDismiss 自定义关闭逻辑

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5\#%E6%8E%A5%E5%8F%A3