鸿蒙UI组件库集成实战：@pura/harmony-dialog弹窗组件全场景用法

在鸿蒙应用开发中，弹窗是必不可少的交互元素。鸿蒙UI组件库提供了丰富且易用的弹窗组件，其中@pura/harmony-dialog是一个功能强大、覆盖全场景用法的弹窗库。本文将手把手带你集成并实战这个弹窗组件，无论你是新手还是老手，都能快速掌握。

1. 什么是 @pura/harmony-dialog？

@pura/harmony-dialog 是基于鸿蒙ArkTS开发的弹窗组件库，它封装了系统能力，提供更灵活的API和样式定制，支持包括确认框、提示框、自定义视图、底部菜单、全屏弹窗等全场景用法。与系统弹窗相比，它更容易统一风格，且无需关心平台差异。

2. 安装与配置

使用 ohpm 安装：

    ohpm install @pura/harmony-dialog  

然后在代码中导入：

    import { Dialog, DialogType } from "@pura/harmony-dialog";  

3. 基础用法：最简单的提示弹窗

通过 Dialog.show 方法可以快速创建一个提示弹窗：

    Dialog.show({  type: DialogType.ALERT,  title: "温馨提示",  message: "恭喜你，已成功集成弹窗组件！",  confirmText: "确定",  onConfirm: () => { console.log("用户点击确定"); }});  

4. 全场景用法详解

下面我们逐一展示各种场景下的调用方式。

4.1 确认对话框

    Dialog.show({  type: DialogType.CONFIRM,  title: "删除确认",  message: "确定要删除这条记录吗？",  cancelText: "取消",  confirmText: "删除",  onConfirm: () => { /* 删除操作 / },  onCancel: () => { / 取消操作 */ }});  

4.2 提示对话框（无按钮，自动关闭）

    Dialog.toast({  message: "操作成功",  duration: 2000});  

4.3 自定义内容弹窗

    Dialog.show({  type: DialogType.CUSTOM,  title: "自定义布局",  customView: (context) => {    // 返回一个自定义的组件    return new CustomDialogView(context);  }});  

4.4 底部动作面板

    Dialog.showActionSheet({  title: "请选择操作",  actions: ["拍照", "从相册选择", "取消"],  cancelIndex: 2,  onSelect: (index) => { console.log("选中第"+index+"项"); }});  

4.5 全屏弹窗

    Dialog.show({  type: DialogType.FULLSCREEN,  customView: FullScreenView,  showClose: true});  

4.6 异步关闭与回调

    const dialog = Dialog.show({ ... });// 稍后手动关闭setTimeout(() => { dialog.dismiss(); }, 3000);  

5. API 参考

Dialog 对象包含以下主要方法：show、toast、showActionSheet、dismissAll 等。详细配置见官方文档。

6. 常见问题

• Q: 如何修改弹窗样式？ A: 通过配置 theme 或 customStyle 属性。
• Q: 弹窗层级冲突？ A: 确保 Dialog 的父容器正确设置。
• Q: 在元服务中使用是否支持？ A: 支持，但需注意权限声明。

7. 总结

通过本文，你应该已经掌握了 @pura/harmony-dialog 在鸿蒙应用中的全场景用法。这个鸿蒙UI组件库的弹窗组件非常灵活，能够满足大多数业务需求。快在你的项目中试试吧！