最受欢迎的三方库之 harmony-dialog
作者:桃花镇童长老
- 2025-06-27 安徽
本文字数:4642 字
阅读完需:约 15 分钟
harmony-dialog(API12+)
🏆简介与推荐
harmony-dialog 一款极为简单易用的零侵入弹窗,仅需一行代码即可轻松实现,无论在何处都能够轻松弹出。其涵盖了 AlertDialog、TipsDialog、ConfirmDialog、SelectDialog、CustomContentDialog、TextInputDialog、TextAreaDialog、BottomSheetDialog、ActionSheetDialog、TextPickerDialog、DatePickerDialog、CustomDialog、BindSheet、LoadingDialog、LoadingProgress、Toast、ToastTip 等多种类型,能够满足各种不同的弹窗开发需求。
harmony-utils 一款功能丰富且极易上手的 HarmonyOS 工具库,借助众多实用工具类,致力于助力开发者迅速构建鸿蒙应用。
🌞下载安装
ohpm i @pura/harmony-dialog
OpenHarmony ohpm 环境配置等更多内容,请参考如何安装 OpenHarmony ohpm 包<br>
📚API 详解 预览效果🌞
<br/>
📚示例代码 使用案例
//简单初始化(1.0.8版本及以后) //必须在UIAbility的onCreate方法里初始化context。 DialogHelper.setDefaultConfig((config) => { config.uiAbilityContext = this.context; }) //设置默认的统一配置,在UIAbility的onCreate方法里初始化 DialogHelper.setDefaultConfig((config) => { config.uiAbilityContext = this.context //必须初始化上下文 config.autoCancel = true; //点击遮障层时,是否关闭弹窗,true表示关闭弹窗。false表示不关闭弹窗。默认值:true config.backCancel = true; //点击返回键或手势返回时,是否关闭弹窗;实现onWillDismiss函数时,该参数不起作用。true表示关闭弹窗。false表示不关闭弹窗。默认值:true。 config.actionCancel = true; //点击操作按钮时,是否关闭弹窗。false表示不关闭弹窗。默认值:true。 config.alignment = DialogAlignment.Center; //弹窗的对齐方式。 config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值:{ dx: 0, dy: 0 } config.maskColor = 0x33000000; //自定义蒙层颜色。默认值 0x33000000 config.backgroundColor = Color.White; //弹窗背板颜色。默认值:Color.White config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质。默认值:BlurStyle.COMPONENT_ULTRA_THICK config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。
config.title = '温馨提示'; //弹框标题 config.primaryButton = '取消'; //弹框左侧按钮。 config.secondaryButton = '确定'; //弹框右侧按钮。 config.imageRes = undefined; //TipsDialog用到,展示的图片。 config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到,自定义图片尺寸。默认值:64*64vp
config.loading_loadSize = 60; //加载动画或进度条的大小 config.loading_loadColor = Color.White; //加载动画或进度条的颜色 config.loading_content = ''; //加载动画的提示文字 config.loading_fontSize = 16; //文字大小 config.loading_fontColor = Color.White; //文字颜色 config.loading_backgroundColor = '#CC000000'; //背景颜色,八位色值前两位为透明度 config.loading_borderRadius = 10; //背景圆角 config.picker_textStyle = ; //设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 config.picker_selectedTextStylee = ; //设置选中项的文本颜色、字号、字体粗细。 config.picker_disappearTextStylee = ; //设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 config.picker_divider: DividerOptions = { strokeWidth: '2px', startMargin: 0, endMargin: 0, color: '#33000000' }; //设置分割线样式,不设置该属性则按“默认值”展示分割线。 config.picker_canLoop: boolean = true; //设置是否可循环滚动。 config.picker_titleFontColor = $r("sys.color.ohos_id_picker_title_text_color"); //弹框标题的字体颜色。 config.picker_titleBackground = "#F9F9F9"; //头部背景颜色 config.picker_buttonFontColor = $r("sys.color.ohos_id_picker_button_text_color"); //按钮颜色
config.toast_duration = 2000; //显示时长(1500ms-10000ms) config.toast_durationLong = 10000; //显示时长(10000ms) config.toast_fontSize = 16; //文字大小 config.toast_fontColor = Color.White; //文字颜色 config.toast_backgroundColor = '#CC000000'; //背景颜色,建议八位色值前两位为透明度 config.toast_borderRadius = 8; //背景圆角 config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding config.toast_orientation = Orientation.VERTICAL; //吐司布局方向,默认垂直。设置该值时,请重新设置imageSize和margin。 config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。垂直默认值:45*45vp,水平建议值:24*24vp。 config.toast_margin = 10; //吐司的图片与文字间距。 });
复制代码
//在子窗口 使用弹框需要传入uiContext DialogHelper.showTipsDialog({ uiContext:this.getUIContext(), //子窗口需要传入UIContext content: '想要卸载这个APP嘛?', onAction: (action) => { ToastUtil.showToast(`${action}`); } })
复制代码
//操作确认类弹出框 DialogHelper.showAlertDialog({ content: "确定保存该WPS文件吗?", onAction: (action) => { if (action == DialogAction.CANCEL) { ToastUtil.showToast(`您点击了取消按钮`); } else if (action == DialogAction.SURE) { ToastUtil.showToast(`您点击了确认按钮`); } } })
//信息确认类弹出框 DialogHelper.showConfirmDialog({ checkTips: "是否记住密码?", content: "您是否退出当前应用", onCheckedChange: (check) => { ToastUtil.showToast(`${check}`); }, onAction: (action) => { ToastUtil.showToast(`${action}`); } }) //提示弹出框 DialogHelper.showTipsDialog({ content: '想要卸载这个APP嘛?', onAction: (action) => { ToastUtil.showToast(`${action}`); } }) //选择类弹出框 DialogHelper.showSelectDialog({ radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"], onCheckedChanged: (index) => { ToastUtil.showToast(`${index}`); }, onAction: (action, dialogId, value) => { ToastUtil.showToast(`${action} --- ${value}`); } })
复制代码
//单行文本输入弹出框 DialogHelper.showTextInputDialog({ text: this.inputText, onChange: (text) => { console.error("onChange: " + text); }, onAction: (action, dialogId, content) => { if (action == DialogAction.SURE) { this.inputText = content; } } }) //多行文本输入弹出框 DialogHelper.showTextAreaDialog({ text: this.inputText, onChange: (text) => { console.error("onChange: " + text); }, onAction: (action, dialogId, content) => { if (action == DialogAction.SURE) { this.inputText = content; } } }) //自定义内容区弹出框 DialogHelper.showCustomContentDialog({ contentBuilder: () => { this.customTextBuilder("我是一个自定义弹框!") }, onAction: (action) => { ToastUtil.showToast(`${action}`); } })
复制代码
//动作面板 DialogHelper.showBottomSheetDialog({ title: "请选择上传方式", sheets: ["相机", "相册", "文件管理器"], onAction: (index) => { ToastUtil.showToast(`您点击了,${this.menuArray[index]}`); } }) //动作面板(IOS风格) DialogHelper.showActionSheetDialog({ title: "请选择上传方式", sheets: ["相机", "相册", "文件管理器"], onAction: (index) => { ToastUtil.showToast(`您点击了,${this.menuArray[index]}`); } })
复制代码
//选择器弹框(TextPickerDialog) let areas = AreaHelper.getAreaSync(); DialogHelper.showTextPickerDialog({ title: "请选择收货地址", range: areas, onAction: (action: number, dialogId: string, value: string | string[]) => { if (action == DialogAction.SURE) { ToastUtil.showToast(`已选择:${value}`); } } })
复制代码
//日期选择器弹框(DatePickerDialog) DialogHelper.showDatePickerDialog({ dateType: DateType.YmdHm, onAction: (action: number, dialogId: string, date: Date): void => { if (action == DialogAction.SURE) { let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm"); ToastUtil.showToast(`选中日期:${dateStr}`); LogUtil.error(`选中日期:${dateStr}`); } } })
复制代码
//进度加载类弹出框 DialogHelper.showLoadingDialog({ loadType: SpinType.spinP, loadColor: Color.White, loadSize: 70, backgroundColor: '#BB000000', content: "加载中…", fontSize: 18, padding: { top: 30, right: 50, bottom: 30, left: 50 }, autoCancel: true })
//进度条加载弹框 DialogHelper.showLoadingProgress({ progress: this.progress })
复制代码
//吐司 DialogHelper.showToast("这是一个自定义吐司") DialogHelper.showToastLong("这是一个自定义的长吐司呀") //吐司Tip DialogHelper.showToastTip({ message: "操作成功", imageRes: $r('sys.media.ohos_ic_public_ok') })
复制代码
//自定义弹窗 let drawer: DrawerOptions = { width: 260, msg: "这是一个自定义弹框,DrawerLayout", alignment: DialogAlignment.CenterStart, offset: { dx: 0, dy: 0 }, transition: AnimationHelper.transitionInLeft(250) } DialogHelper.showCustomDialog(wrapBuilder(DrawerBuilder), drawer)
复制代码
🍎沟通与交流🙏
使用过程中发现任何问题都可以提 Issue 给我们;
当然,我们也非常欢迎你给我们发 PR 。
https://gitee.com/tongyuyan/harmony-utils
🌏开源协议
本项目基于 Apache License 2.0 ,在拷贝和借鉴代码时,请大家务必注明出处。
划线
评论
复制
发布于: 2025-06-27阅读数: 3
桃花镇童长老
关注
还未添加个人签名 2025-05-14 加入
还未添加个人简介









评论