HarmonyOS 鸿蒙Next在Class中封装Dialog提示框

class DialogUtil {
  private promptAction?: PromptAction;
  private contentNode?: ComponentContent<DialogOptions>;
  private options?: DialogOptions;

  /
   * 弹出一个Dialog提示框
   * @param options: {
   * title:标题默认为温馨提示,
   * msg:提示消息,
   * okText:确定按钮文本,
   * cancelText:取消按钮文本,
   * alignment:弹窗在竖直方向上的对齐方式,
   * maskRect:弹窗遮蔽层区域,
   * isModal:弹窗是否为模态窗口,
   * offset:弹窗相对alignment所在位置的偏移量,
   * okCallBack:确定按钮事件,
   * cancelCallBack:取消按钮事件
   * }
   */
   showDialog(uiContext: UIContext, options: DialogOptions) {
     this.options = options;
     this.promptAction = uiContext.getPromptAction();

     if (!this.options) {
       this.options = new DialogOptions();
     }
     if (!this.options.okText) {
       this.options.okText = ‘确定’;
     }
     if (!this.options.title) {
       this.options.title = ‘温馨提示’;
     }
     if (!this.options.cancelText) {
       this.options.cancelText = ‘取消’;
     }
     if (this.options.alignment == undefined) {
       this.options.alignment = DialogAlignment.Center;
     }
     if (!this.options.maskRect) {
       this.options.maskRect = { x: 0, y: 0, width: ‘100%’, height: ‘100%’ };
     }
     if (this.options.isModal == undefined) {
       this.options.isModal = true;
     }
     if (!this.options.offset) {
       this.options.offset = this.options.alignment == DialogAlignment.Bottom || this.options.alignment == DialogAlignment.BottomEnd || this.options.alignment == DialogAlignment.BottomStart ? {
         dx: 0,
         dy: -20
       } : this.options.alignment == DialogAlignment.Top || this.options.alignment == DialogAlignment.TopStart || this.options.alignment == DialogAlignment.TopEnd ? {
         dx: 0,
         dy: 20
       } : { dx: 0, dy: 0 };
     }
     this.contentNode = new ComponentContent(uiContext, wrapBuilder(customDialogBuilder), options);
     //创建弹框
     this.promptAction.openCustomDialog(this.contentNode,{
       showInSubWindow: false,
       offset: this.options.offset,
       alignment:DialogAlignment.Center,
       maskRect:this.options.maskRect,
       isModal:this.options.isModal
     })
  }

  /
   * 关闭对话框
   * @returns
   */
  closeCustomDialog() {
    if (this.contentNode) {
      this.promptAction?.closeCustomDialog(this.contentNode);
    }
    return this;
  }

}
export default new DialogUtil()

/**
 * 普通dialog入参对象
 */
class DialogOptions {
  title?: ResourceStr;
  msg: ResourceStr = ‘’;
  okText?: string;
  cancelText?: string;
  alignment?: DialogAlignment;
  maskRect?: Rectangle;//蒙板的位置大小
  isModal?: boolean;//是否显示蒙版
  offset?: Offset;
  okCallBack?: () => void;
  cancelCallBack?: () => void
}

@Builder
function customDialogBuilder(options: DialogOptions) {
  RelativeContainer() {
    Text(options.title)
      .fontSize($r(‘app.float.font22’))
      .fontColor($r(‘app.color.app_text_black’))
      .textAlign(TextAlign.Center)
      .alignRules({
        left:{anchor:“container”, align:HorizontalAlign.Start},
        right:{anchor:“container”, align:HorizontalAlign.End}
      })
      .margin({top:$r(‘app.float.float_20’),left:$r(‘app.float.float_10’),right:$r(‘app.float.float_10’)})
      .id(‘title’)

    Text(options.msg)
      .fontSize($r(‘app.float.font18’))
      .fontColor($r(‘app.color.app_gray’))
      .textAlign(TextAlign.Center)
      .alignRules({
        top:{anchor:“title”, align:VerticalAlign.Bottom},
        left:{anchor:“container”, align:HorizontalAlign.Start},
        right:{anchor:“container”, align:HorizontalAlign.End}
      })
      .margin({top:$r(‘app.float.float_20’),left:$r(‘app.float.float_10’),right:$r(‘app.float.float_10’)})
      .id(‘content’)

    Row() {
      Text(“确认”)
        .fontSize($r(‘app.float.font18’))
        .fontColor($r(‘app.color.app_main’))
        .textAlign(TextAlign.Center)
        .width(‘100%’)
        .layoutWeight(1)
        .height($r(‘app.float.float_40’))
        .onClick(() => {
          if(options.okCallBack){
            options.okCallBack()
          }
        })

      Line().width(1).height(20).backgroundColor($r(‘app.color.app_gray_e’))
      Text(“取消”)
        .fontSize($r(‘app.float.font18’))
        .fontColor($r(‘app.color.app_red’))
        .textAlign(TextAlign.Center)
        .width(‘100%’)
        .layoutWeight(1)
        .height($r(‘app.float.float_40’))
        .onClick(() => {
          if(options.cancelCallBack){
            options.cancelCallBack()
          }
        })
    }
    .height($r(‘app.float.float_40’))
    .alignRules({
      top:{anchor:“content”, align:VerticalAlign.Bottom}
    })
    .margin({top:$r(‘app.float.float_60’)})
  }
  .width(‘80%’)
  .height(‘auto’)
  .borderRadius($r(‘app.float.float_40’))
  .backgroundColor($r(‘app.color.app_white’))
}

ui页面中使用

import dialog from ‘…/…/…/Common/util/DialogUtil’;

dialog.showDialog(this.getUIContext(),{
  msg: ‘是否确认清空消息列表’,
  okCallBack:()=>{
    dialog.closeCustomDialog()
  },
  cancelCallBack:()=>{
    dialog.closeCustomDialog()
  }
});