HarmonyOS NEXT - Dialog 和完全自定义弹框

demo 地址: https://github.com/iotjin/JhHarmonyDemo
组件对应代码实现地址
代码不定时更新，请前往github查看最新代码

在demo中这些组件和工具类都通过module实现了，具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils

官方dialog 比较反人类，调用比较麻烦，下面两种还略微好点

• 通过promptAction.openCustomDialog 实现自定义弹窗。对应官方文档
• 不依赖UI组件的全局自定义弹出框 (openCustomDialog)（推荐）对应官方文档

在三方库上找了一个弹框库，简单调整样式封装了一层

三方库地址：
@pura/harmony-dialog(V1.0.7)

需要先在项目中导入三方库

 ohpm i @pura/harmony-dialog@1.0.7

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

效果图

调用方式

需要先全局初始化一次，否则弹框不显示
全局初始化可以放在入口的page处
1.0.8开始需要在在windowStage.loadContent 后执行初始化

以下是在第一个page的aboutToAppear方法初始化的

  aboutToAppear() {// 初始化Loadinglet uiContext: UIContext = this.getUIContext();JhDialog.initConfig(uiContext)}

• 标题内容

     JhDialog.show({title: '提示',message: '您确定要退出登录吗',onCancel: () => {console.log(`点击了取消按钮`)},onConfirm: () => {console.log(`点击了确认按钮`)},});

• 修改按钮文字

  JhDialog.show({title: '提示',message: '您需要同意相关协议才能使用！',leftText: '不同意',rightText: '同意',onCancel: () => {console.log(`点击了取消按钮`)},onConfirm: () => {console.log(`点击了确认按钮`)},});

• 点击按钮弹框不消失

   JhDialog.show({title: '提示',message: '点击取消按钮弹框消失，点击确认按钮延时3秒后弹框消失',clickBtnClose: false,onCancel: (action, dialogId, content) => {console.log(`点击了取消按钮`)JhDialog.hide(dialogId)},onConfirm: (action, dialogId, content) => {console.log(`点击了确认按钮`)setTimeout(() => {JhDialog.hide(dialogId)}, 3000)},});

• 录入框(数字类型，正整数，最大三位)

    JhDialog.showInputDialog({title: '提示',placeholder: "请输入年龄",inputType: InputType.Number,maxLength: 3,inputFilter: {value: "[0-9]",error: (value) => {console.error("inputFilter: " + value);}},onCancel: (action, dialogId, content) => {console.log(`点击了取消按钮`)JhProgressHUD.showText(`点击了取消按钮`)},onConfirm: (action, dialogId, content) => {console.log(`点击了确认按钮, 此时录入的文字为: ${content}}`)JhDialog.hide(dialogId)JhProgressHUD.showText(`点击了确认按钮`)},});

• 多行录入框

  JhDialog.showTextAreaDialog({title: '提示',onCancel: (action, dialogId, content) => {console.log(`点击了取消按钮`)JhProgressHUD.showText(`点击了取消按钮`)},onConfirm: (action, dialogId, content) => {console.log(`点击了确认按钮, 此时录入的文字为: ${content}}`)JhDialog.hide(dialogId)JhProgressHUD.showText(`点击了确认按钮`)},});

• 自定义内容

  JhDialog.showCustomDialog({title: '',contentAreaPadding: {top: 0,bottom: 0,left: 0,right: 0},contentBuilder: () => {this.customBuilder()},onCancel: () => {console.log(`点击了取消按钮`)},onConfirm: () => {console.log(`点击了确认按钮`)},});@BuildercustomBuilder() {Column() {}.width('100%').height(200).backgroundColor(Color.Red)}

• 底部完全自定义

  let custom: JhCustomOptions = {height: 360,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: 0 },transition: AnimationHelper.transitionInDown(0),autoCancel: true, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。};JhDialog.showBottomAllCustomDialog(wrapBuilder(AllCustomBuilder))// JhDialog.showBottomAllCustomDialog(wrapBuilder(AllCustomBuilder), custom)

• 完全自定义-顶部弹出

   let custom: JhCustomOptions = {height: 360,alignment: DialogAlignment.Top,offset: { dx: 0, dy: 0 },transition: AnimationHelper.transitionInDown(0),autoCancel: true, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。};JhDialog.showAllCustomDialog(wrapBuilder(AllCustomBuilder), custom)

• 完全自定义-左侧弹出

  let custom: JhCustomOptions = {width: 260,height: '100%',alignment: DialogAlignment.CenterStart,offset: { dx: 0, dy: 0 },transition: AnimationHelper.transitionInLeft(200),autoCancel: true, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。};JhDialog.showAllCustomDialog(wrapBuilder(AllCustomBuilder), custom)

JhDialog.ets 完整代码

///  JhDialog.ets
///
///  Created by iotjin on 2024/11/26.
///  description:  @pura/harmony-dialog 封装。JhDialog和JhToast共用同一默认配置import { ActionCallBack, AnimationHelper, BaseDialogOptions, DialogAction, DialogHelper } from '@pura/harmony-dialog';
import { InputFilter } from '@pura/harmony-dialog/src/main/ets/model/InputFilter';
import { KColors } from '../configs/Colors';const _loadingBgColor = '#CC000000'
const _closeTime = 1500
const _radius = 5.0
const _fontSize = 16.0// Dialog 、Toast显示位置
const _alignment: Alignment = Alignment.Center
const _offset: Offset = { dx: 0.0, dy: 0.0 }// Dialog 按钮文字颜色
const _cancelTextColor = '#999999'
const _confirmTextColor = KColors.kThemeColor
const _dialogBgColor = KColors.kAlertBgColor
const _dialogRadius = 8
const _title = '提示'
const _placeholder = '请输入'
const _cancelText = '取消'
const _confirmText = '确认'
const _btnStyle = ButtonStyleMode.TEXTUALexport interface JhDialogOptions {title: ResourceStrmessage?: ResourceStrcontentBuilder?: () => void // 自定义弹框内容contentAreaPadding?: Padding // 自定义弹框内容区内边距leftText?: ResourceStrrightText?: ResourceStrhiddenCancel?: boolean // 默认falseclickBtnClose?: boolean // 点击确认按钮是否弹框消失，默认true// onCancel?: () => void// onConfirm?: (value: ResourceStr) => voidonCancel?: ActionCallBack // 按钮的CallBack事件onConfirm?: ActionCallBack // 按钮的CallBack事件
}export interface JhDialogInputOptions extends JhDialogOptions {inputText?: ResourceStrplaceholder?: ResourceStrinputType?: InputTypetextAreaType?: TextAreaTypefontColor?: ResourceColor; //字体颜色fontSize?: Length; //字体大小placeholderColor ?: ResourceColor //设置placeholder文本颜色。inputBackgroundColor?: ResourceColor; //输入框背景inputBorder?: BorderOptions; //输入框BorderinputHeight?: Length; //输入框高度defaultFocus?: boolean //设置弹框默认获得焦点，打开弹窗同时弹出输入法maxLength?: number; //文本的最大输入字符数。  默认值：Infinity，可以无限输入。controller?: TextInputController; //TextInput组件的控制器inputFilter?: InputFilter; //通过正则表达式设置输入过滤器。
}export interface JhCustomOptions extends BaseDialogOptions {width?: Dimension | Length; //宽度height?: Dimension | Length //高度alignment?: DialogAlignmentoffset?: Offset //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }transition?: TransitionEffect; //设置弹窗显示和退出的过渡效果。 AnimationHelper.transitionInDown(0)autoCancel?: boolean, // //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹backCancel?: boolean, // 点击返回键或手势返回时，是否关闭弹窗
}export class JhDialog {/*** 设置默认统一样式* 初始化Dialog(在全局入口 page 处挂载)* 注：JhDialog、JhToast共用此默认配置*/public static initConfig(context: UIContext) {DialogHelper.setDefaultConfig((config) => {config.uiContext = contextconfig.autoCancel = false; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：trueconfig.backCancel = false; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。true表示关闭弹窗。false表示不关闭弹窗。默认值：true。config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。默认值：true。config.alignment = DialogAlignment.Center; //弹窗的对齐方式。config.offset = _offset; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }config.maskColor = 0x11000000; //自定义蒙层颜色。默认值 0x33000000config.backgroundColor = _dialogBgColor; //弹窗背板颜色。默认值：Color.Whiteconfig.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质config.cornerRadius = _dialogRadius; //设置背板的圆角半径。可分别设置4个圆角的半径config.title = _title; //弹框标题config.primaryButton = _cancelText; //弹框左侧按钮。config.secondaryButton = _confirmText; //弹框右侧按钮。config.imageRes = undefined; //TipsDialog用到，展示的图片。config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vpconfig.loading_loadSize = 60; //加载动画或进度条的大小config.loading_loadColor = Color.White; //加载动画或进度条的颜色config.loading_content = ''; //加载动画的提示文字config.loading_fontSize = _fontSize; //文字大小config.loading_fontColor = Color.White; //文字颜色config.loading_backgroundColor = _loadingBgColor; //背景颜色，八位色值前两位为透明度config.loading_borderRadius = _radius; //背景圆角// toastconfig.toast_fontSize = _fontSize; //文字大小config.toast_fontColor = Color.White; //文字颜色config.toast_backgroundColor = _loadingBgColor; //背景颜色，建议八位色值前两位为透明度config.toast_borderRadius = _radius; //背景圆角config.toast_padding = {top: 16,bottom: 16,left: 24,right: 24,}; //Paddingconfig.toast_imageSize = { width: 30, height: 30 }; //Tip图片尺寸。默认值：45*45vpconfig.toast_duration = _closeTime; //显示时长(1500ms-10000ms)config.toast_durationLong = 5000; //显示时长});}/*** 关闭弹框* @param dialogId 目前弹框id*/public static hide(dialogId: string) {DialogHelper.closeDialog(dialogId)}/*** 中间弹框* @param options*/public static show(options: JhDialogOptions) {DialogHelper.showAlertDialog({title: options.title ?? _title,content: options.message ?? '',autoCancel: false, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。actionCancel: options.clickBtnClose ?? true, // 点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。primaryButton: options.hiddenCancel ? null : {value: options.leftText ?? _cancelText,fontColor: _cancelTextColor,buttonStyle: _btnStyle},secondaryButton: {value: options.rightText ?? _confirmText,fontColor: _confirmTextColor,buttonStyle: _btnStyle},onAction: (action, dialogId, content) => {if (action == DialogAction.ONE) {options.onCancel?.(action, dialogId, content)} else {options.onConfirm?.(action, dialogId, content)}}})}/*** 中间录入弹框 - 单行* @param options*/public static showInputDialog(options: JhDialogInputOptions) {DialogHelper.showTextInputDialog({title: options.title ?? _title,text: options.inputText as string,maxLength: options.maxLength,inputFilter: options.inputFilter,controller: options.controller,placeholder: options.placeholder ?? _placeholder,placeholderColor: options.placeholderColor,inputType: options.inputType ?? InputType.Normal,inputBorder: options.inputBorder ?? { radius: 8 },inputHeight: options.inputHeight,defaultFocus: true,alignment: DialogAlignment.Center,offset: _offset,contentAreaPadding: {top: 12,bottom: 16,left: 15,right: 15},onChange: (text) => {// console.log("onChange: " + text);},autoCancel: false, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。actionCancel: options.clickBtnClose ?? true, // 点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。buttons: [options.hiddenCancel ? null : {value: options.leftText ?? _cancelText,fontColor: _cancelTextColor,buttonStyle: _btnStyle},{value: options.rightText ?? _confirmText,fontColor: _confirmTextColor,buttonStyle: _btnStyle},],onAction: (action, dialogId, content) => {if (action == DialogAction.ONE) {options.onCancel?.(action, dialogId, content)} else {options.onConfirm?.(action, dialogId, content)}}})}/*** 中间录入弹框 - 多行* @param options*/public static showTextAreaDialog(options: JhDialogInputOptions) {DialogHelper.showTextAreaDialog({title: options.title ?? _title,text: options.inputText as string,maxLength: options.maxLength,inputFilter: options.inputFilter,controller: options.controller,placeholder: options.placeholder ?? _placeholder,placeholderColor: options.placeholderColor,inputType: options.textAreaType ?? TextAreaType.NORMAL,inputBorder: options.inputBorder ?? { radius: 8 },inputHeight: options.inputHeight,defaultFocus: true,alignment: DialogAlignment.Center,offset: _offset,contentAreaPadding: {top: 12,bottom: 16,left: 15,right: 15},onChange: (text) => {// console.log("onChange: " + text);},autoCancel: false, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。actionCancel: options.clickBtnClose ?? true, // 点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。buttons: [options.hiddenCancel ? null : {value: options.leftText ?? _cancelText,fontColor: _cancelTextColor,buttonStyle: _btnStyle},{value: options.rightText ?? _confirmText,fontColor: _confirmTextColor,buttonStyle: _btnStyle},],onAction: (action, dialogId, content) => {if (action == DialogAction.ONE) {options.onCancel?.(action, dialogId, content)} else {options.onConfirm?.(action, dialogId, content)}}})}/*** 中间自定义弹框* @param options*/public static showCustomDialog(options: JhDialogOptions) {DialogHelper.showCustomContentDialog({title: options.title ?? _title,contentBuilder: options.contentBuilder,contentAreaPadding: options.contentAreaPadding,autoCancel: false, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。backCancel: false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。actionCancel: options.clickBtnClose ?? true, // 点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。buttons: [options.hiddenCancel ? null : {value: options.leftText ?? _cancelText,fontColor: _cancelTextColor,buttonStyle: _btnStyle},{value: options.rightText ?? _confirmText,fontColor: _confirmTextColor,buttonStyle: _btnStyle},],onAction: (action, dialogId, content) => {if (action == DialogAction.ONE) {options.onCancel?.(action, dialogId, content)} else {options.onConfirm?.(action, dialogId, content)}}})}/*** 底部完全自定义弹框，默认高度260* @param builder* @param options 可不传*/public static showBottomAllCustomDialog(builder: WrappedBuilder<[JhCustomOptions]>, options?: JhCustomOptions): string {let custom: JhCustomOptions = {height: options?.height ?? 260,alignment: options?.alignment ?? DialogAlignment.Bottom,offset: options?.offset ?? { dx: 0, dy: 0 },transition: options?.transition ?? AnimationHelper.transitionInDown(0),autoCancel: options?.autoCancel ?? true, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。默认关闭backCancel: options?.backCancel ?? false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。默认不关闭};return JhDialog.showAllCustomDialog(builder, custom);}/*** 完全自定义弹框，默认底部弹出,高度260* @param builder* @param options 可不传* @returns*/public static showAllCustomDialog(builder: WrappedBuilder<[JhCustomOptions]>, options?: JhCustomOptions): string {let custom: JhCustomOptions = {width: options?.width ?? '100%',height: options?.height ?? 260,alignment: options?.alignment ?? DialogAlignment.Bottom,offset: options?.offset ?? { dx: 0, dy: 0 },transition: options?.transition ?? AnimationHelper.transitionInDown(0),autoCancel: options?.autoCancel ?? true, // 点击遮障层时，是否关闭弹窗，true表示关闭弹窗。默认关闭backCancel: options?.backCancel ?? false, // 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。默认不关闭};return DialogHelper.showCustomDialog(builder, custom);}/*** 完全自定义弹框2* @param builder* @param options* @returns*/public static showAllCustomDialog2<T extends BaseDialogOptions>(builder: WrappedBuilder<[T]>, options: T): string {return DialogHelper.showCustomDialog(builder, options)}
}