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

代码仓库: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;
}
相关推荐
zhanshuo36 分钟前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
zhanshuo36 分钟前
鸿蒙系统通知开发全攻略:实现跳转、自动消失、消息提醒的完整教程
harmonyos
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼16 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG18 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏