写点什么

最受欢迎的三方库之 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


https://github.com/787107497

🌏开源协议

本项目基于 Apache License 2.0 ,在拷贝和借鉴代码时,请大家务必注明出处。

用户头像

还未添加个人签名 2025-05-14 加入

还未添加个人简介

评论

发布
暂无评论
最受欢迎的三方库之harmony-dialog_HarmonyOS_桃花镇童长老_InfoQ写作社区