鸿蒙分享(四)：弹窗简单封装

代码仓库：https://gitee.com/linguanzhong/share_harmonyos 鸿蒙api:12

引用的harmony-utils地址：OpenHarmony三方库中心仓

引用的harmony-dialog地址：OpenHarmony三方库中心仓

引用的loading-dialog地址OpenHarmony三方库中心仓

import LoadingDialog from '@lyb/loading-dialog'
import { ToastUtil } from '@pura/harmony-utils'
import { BaseDialogOptions, DialogHelper } from '@pura/harmony-dialog'
import { BaseOptions } from './BaseOptions'
import { DialogParams } from './DialogParams'
import { BaseConfirmDialog } from './BaseConfirmDialog'

/**
 * 弹窗类
 */
export class BaseDialog {
  //确定弹窗
  static showConfirmDialog(params: DialogParams) {
    params.isClickClose = true
    let drawer: BaseOptions = {
      params: params,
      alignment: DialogAlignment.Center,
      offset: { dx: 0, dy: 0 },
      autoCancel: params.autoCancel ?? false,
      backCancel: params.backCancel ?? false,
    }
    if (BaseDialog.isDialogShowing(drawer.dialogId)) {
      BaseDialog.hintDialog(drawer.dialogId)
    }
    return DialogHelper.showCustomDialog(wrapBuilder(BuilderConfirmDialog), drawer)
  }

  //自定义弹窗
  static showCustomDialog<T extends BaseDialogOptions>(builder: WrappedBuilder<[T]>, options: T): string {
    return DialogHelper.showCustomDialog(builder, options)
  }


  static showToast(content: string | Resource) {
    ToastUtil.showToast(content, {
      duration: 2000,
      alignment: Alignment.Bottom,
    })
  }

  static showLoading(msg: string = "加载中...") {
    LoadingDialog.showLoading({
      msg: msg,
      tintColor: Color.White,
      textColor: Color.White,
    })
  }

  static showProgress(progress: number) {
    LoadingDialog.showProgress("", progress)
  }

  static hideProgress() {
    LoadingDialog.hide()
  }

  static hintLoading() {
    LoadingDialog.hide()
  }

  static hintDialog(dialogId?: string) {
    DialogHelper.closeDialog(dialogId)
  }

  static isDialogShowing(dialogId?: string): boolean {
    return DialogHelper.isShowing(dialogId)
  }
}

//确认弹窗
@Builder
function BuilderConfirmDialog(options: BaseOptions) {
  BaseConfirmDialog({
    params: options.params,
    dialogId: options.dialogId
  })
}

import { BaseImage } from '../../view/BaseImage'
import { BaseDialog } from './BaseDialog'
import { DialogParams } from './DialogParams'

//确定弹窗
@Component
export struct BaseConfirmDialog {
  @Prop params: DialogParams
  @Prop dialogId: string

  build() {
    Stack({
      alignContent: Alignment.Top
    }) {

      Column() {
        if (this.params.title) {
          Text(this.params.title)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .fontColor($r("app.color.color_10141A"))
            .margin({ top: 43 })
        }
        if (this.params.content) {
          Text(this.params.content)
            .fontSize(12)
            .fontColor($r("app.color.color_8E98AA"))
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }
        Row() {
          if (!this.params.isHideCancelBtnText) {
            Button(this.params.cancelBtnText)
              .border({ width: 1, color: this.params.primaryColor })
              .backgroundColor(Color.Transparent)
              .fontColor(this.params.primaryColor)
              .fontSize(14)
              .onClick(() => {
                if (this.params.onCancel) {
                  this.params.onCancel()
                  if (this.params.isClickClose) {
                    BaseDialog.hintDialog(this.dialogId)
                  }
                } else {
                  BaseDialog.hintDialog(this.dialogId)
                }
              })
              .layoutWeight(1)
            Blank()
              .margin({ left: 15, right: 15 })
          }
          Button(this.params.confirmBtnText)
            .backgroundColor(this.params.primaryColor)
            .fontColor(Color.White)
            .fontSize(14)
            .onClick(() => {
              if (this.params.onConfirm) {
                this.params.onConfirm(this.dialogId)
                if (this.params.isClickClose) {
                  BaseDialog.hintDialog(this.dialogId)
                }
              } else {
                BaseDialog.hintDialog(this.dialogId)
              }
            })
            .layoutWeight(1)
        }.margin({ top: 20 })
        .width("100%")
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .backgroundColor(Color.White)
      .width("80%")
      .padding({ left: 23, right: 23, bottom: 21 })
      .margin({
        top: this.params?.headIcon == null ? 0 : 70
      })
      .borderRadius(20)

      if (this.params.headIcon) {
        BaseImage({
          src: this.params?.headIcon,
          mWidth: 93,
          mHeight: 81,
        })
      }
    }
  }
}

import { BaseDialogOptions } from '@pura/harmony-dialog';
import { DialogParams } from './DialogParams';

//自定义弹框
export interface BaseOptions extends BaseDialogOptions {
  width?: number;
  params?: DialogParams;
}

@Observed
export class DialogParams {
  dialogId?: string
  headIcon?: Resource;
  primaryColor?: string | Resource;
  title?: string | Resource;
  content?: string | Resource;
  cancelBtnText?: string | Resource = "取消";
  confirmBtnText?: string | Resource = "确定";
  isHideCancelBtnText?: boolean = false;
  onCancel?: () => void;
  onConfirm?: (dialogId: string) => void;
  //点击按钮且关闭弹窗
  isClickClose?: boolean = true;
  backCancel?: boolean = false;
  autoCancel ?: boolean = false;
}