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

代码仓库: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;
}
相关推荐
二二孚日4 小时前
自用华为ICT云赛道AI第三章知识点-MindSpore特性、MindSpore开发组件
人工智能·华为
Georgewu4 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉4 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu4 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20006 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉7 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡10 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
九章云极AladdinEdu10 小时前
华为昇腾NPU与NVIDIA CUDA生态兼容层开发实录:手写算子自动转换工具链(AST级代码迁移方案)
人工智能·深度学习·opencv·机器学习·华为·数据挖掘·gpu算力
xq952711 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹411 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next