HarmonyOS 鸿蒙Next如何自定义弹窗、与组件分离解耦、全局弹窗

目的：自定义弹窗，弹出位置可自定义（底部、中心、顶部），弹窗内容自定义、蒙层取消；与UI组件分离解耦
首先需要在启动类

EntryAbility

中添加如下代码，将uicontext保存到AppStorage中

window.getLastWindow(this.context).then((data: window.Window) => {
  let uiContext = data.getUIContext();
  AppStorage.setOrCreate<UIContext>(‘uiContext’, uiContext);
  // 获取UIContext实例
});

然后我们新建一个弹窗单例工具类

import { ComponentContent, promptAction } from '@kit.ArkUI’

export class PopViewUtils {
  private constructor() {}
  private static popShare: PopViewUtils
  private componentContentList: ComponentContent<object>[] = new Array<ComponentContent<object>>()

  static shareInstance() {
    if (!PopViewUtils.popShare) {
      PopViewUtils.popShare = new PopViewUtils()
    }
    return PopViewUtils.popShare
  }
  /
   * 自定义弹窗
   * @param contentView
   * @param args
   * @param options
   */
  static showPopView<T extends object>(contentView: WrappedBuilder<[T]>, args: T,
    options?: promptAction.BaseDialogOptions) {
    let uiContext = AppStorage.get<UIContext>(‘uiContext’)
    if (uiContext) {
      let prompt = uiContext.getPromptAction()
      let componentContent = new ComponentContent(uiContext, contentView, args)
      let customOptions: promptAction.BaseDialogOptions = {
        alignment: options?.alignment || DialogAlignment.Bottom,
        autoCancel: options?.autoCancel || true,
        onWillDismiss: (action: DismissDialogAction) => {
          if (options?.onWillDismiss) {
            options.onWillDismiss(action)
          }else {
            action.dismiss()
          }
        },
        onDidAppear: () => {
          if (options?.onDidAppear) {
            options.onDidAppear()
          }
        },
        onDidDisappear: () => {
          if (options?.onDidDisappear) {
            options.onDidDisappear()
          }
          if (PopViewUtils.shareInstance().componentContentList.length > 0) {
            PopViewUtils.shareInstance().componentContentList.pop()
          }
        },
        onWillDisappear: () => {
          if (options?.onWillDisappear) {
            options.onWillDisappear()
          }
        }
      }
      prompt.openCustomDialog(componentContent, customOptions)
      PopViewUtils.shareInstance().componentContentList.push(componentContent)
    }
  }

  static closePopView() {
    let uiContext = AppStorage.get<UIContext>(‘uiContext’)
    if (uiContext) {
      let prompt = uiContext.getPromptAction()
      let comList = PopViewUtils.shareInstance().componentContentList
      let com = PopViewUtils.shareInstance().componentContentList[comList.length - 1]
      if (com) {
        prompt.closeCustomDialog(com)
        PopViewUtils.shareInstance().componentContentList.pop()
      }
    }
  }
}
这里解释一下为什么需要弹窗单例类，原因在于api12中提供的通过

uiContext.getPromptAction()

PromptAction对象在close方法

closeCustomDialog<T extends Object>(dialogContent: ComponentContent<T>): Promise<void>;

PopViewUtils.showPopView<PopParam>(wrapBuilder(activityPopView), param,
  { alignment: DialogAlignment.Bottom })

declare function wrapBuilder<Args extends Object[]>(builder: (…args: Args) => void): WrappedBuilder<Args>;

@Builder
export function activityPopView(param: PopParam) {
  CouponActivityRulePopView({
    activityUrl: param.url,
    handleClose: () => {
      PopViewUtils.closePopView()
    }
  })
}

class PopParam {
  url: string = ‘’
}

ComponentContent有两个构造函数，不传参数的构造函数必闪退

/
 * 协议确认勾选弹窗
 * @param param
 */
static showNoticeAcceptPrompt(param: PopAcceptParam) {
  PopViewUtils.showPopView(wrapBuilder(showAcceptPrompt), param, { alignment: DialogAlignment.Center })
}

@Builder
function showAcceptPrompt(param: PopAcceptParam) {
  ProtocolAcceptPopView({
    param: param,
    closeAction: () => {
      PopViewUtils.closePopView()
    }
  })
}

export interface PopAcceptParam {
  title?: string
  cancelName?: string
  confirmName?: string
  /
   * 弹窗自定义文案，与multList互斥
   */
  noticeContent?: string
  /
   * 弹窗链接配置项
   */
  multList?: Array<Multifunction>
  /
   * 弹窗链接点击事件
   * @param model
   */
  linkClick?: (model: Multifunction) => void
  /
   * 弹窗确认点击事件
   */
  confirmClick?: () => void
}

使用：

NotifyUntilHelper.showNoticeAcceptPrompt({
  title : ‘提示’,
  confirmName:‘同意并购买’,
  cancelName:‘取消’,
  noticeContent:“已阅读并同意以上《用户须知》和《使用说明》”,
  confirmClick:()=>{
    this.acceptFlag = true
    this.bottomHandleAction()
  }
})

如上示例，我们可以将组件中的回调事件及可变的UI配置利用参数对象来进行传递；

底部弹窗自定内容：

弹窗效果：

通过PopViewUtils基本上可以满足项目中弹窗解耦、自定义弹出页面、loading等功能；组件的参数直接通过interface定义可配置项；
弹窗封装我也是走了很多弯路，希望能帮到大家；有什么问题或者更好的改进方式可以在评论区留言