HarmonyOS鸿蒙Next中如何解除openCustomDialog依赖this.getUIContext的问题？

【背景知识】

• 通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，优先考虑自定义弹窗，便于弹窗样式与内容的自定义，详情请参考自定义弹窗 (CustomDialog)。
• [@ohos.promptAction（弹窗）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction)是一种不依赖UI组件的全局自定义弹出框。从API10开始，可以通过使用UIContext中的getPromptAction方法获取当前UI上下文关联的PromptAction对象。

【解决方案】

openCustomDialog和UIContext解除联系，可以通过封装自定义弹窗模块，仅需传入以下两个参数，调用方法即可获得自定义弹窗：

• 传入弹窗名称；
• 传入弹窗自定义内容，如文本内容，图片内容。

代码示例如下，调用的是testPromptDialog方法：

export function testPromptDialog(pageName: string, text: string) {
  const that = GlobalContext.getContext().getObject(pageName) as UIContext;
  if (that) {
    promptAction.openCustomDialog({
      builder: customDialogBuilder.bind(that, text)
    }).then((dialogId: number) => {
      customDialogId = dialogId;
    })
  }
}

开发步骤如下:

1. 新建GlobalContext.ets工具类，用于页面Context的保存和获取。

export class GlobalContext {
  private constructor() {}

  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

1. 新建DialogUtils.ets工具类，工具类中已封装了自定义弹窗，以及弹出自定义弹窗的方法。拉起弹窗通过promptAction.openCustomDialog来实现。

import { promptAction } from '@kit.ArkUI'
import { GlobalContext } from './GlobalContext'

let customDialogId: number = 0

@Builder
export function failDialogBuilder(content: String) {
  Column() {
    Text(content as string)
      .fontSize(20).height("30%")
    Text('失败原因：' + content).fontSize(16).height("30%")
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
    .margin({ top: 30 })
  }.height(200).padding(5)
}

@Builder
export function successDialogBuilder(content: String) {
  Column() {
    Text(content as string)
      .fontSize(20).height("30%")
    Text('成功原因：' + content).fontSize(16).height("30%")
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
    .margin({ top: 30 })
  }.height(200).padding(5)
}

// 传入页面名称和文本内容
export function testPromptDialog(pageName: string, text: string, controller: Function) {
  const that = GlobalContext.getContext().getObject(pageName) as UIContext;
  if (that) {
    promptAction.openCustomDialog({
      builder: controller.bind(that, text)
    }).then((dialogId: number) => {
      customDialogId = dialogId;
    })
  }
}

1. 页面初始化时存入Context，然后在入口处调用自定义弹窗封装方法。

import { GlobalContext } from '../utils/GlobalContext'
import { failDialogBuilder, successDialogBuilder, testPromptDialog } from '../utils/DialogUtils'

@Entry
@Component
struct Index {
  aboutToAppear(): void {
    // 设置page的Context
    GlobalContext.getContext().setObject('pageName', this)
  }

  build() {
    Row() {
      Column() {
        Button("promptAction失败弹窗")
          .onClick(() => {
            testPromptDialog("pageName", "this is  dialog1", failDialogBuilder)
          })
        Button("promptAction成功弹窗")
          .onClick(() => {
            testPromptDialog("pageName", "this is dialog2", successDialogBuilder)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}