前言弹窗是应用与用户交互的重要方式用于信息确认、操作提示、数据输入等。pura/harmony-utils的DialogUtil封装了常用弹窗方法简化了弹窗的创建和显示。本文将从API说明、代码实战、进阶用法、常见问题等多个维度进行全面讲解帮助开发者快速掌握并应用到实际项目中。一、DialogUtil核心APIDialogUtil提供了以下弹窗方法方法说明返回类型使用场景showAlert(title, message)显示提示弹窗void信息提示showConfirm(title, message)显示确认弹窗boolean操作确认showActionSheet(options)显示列表选择弹窗number选项选择1.1 核心特性简洁易用封装复杂API为一行调用降低使用门槛类型安全完整的TypeScript类型定义编译期即可发现错误异常处理内置异常捕获机制避免运行时崩溃多种样式支持提示、确认、列表选择三种弹窗1.2 弹窗类型对照类型方法按钮数返回值提示弹窗showAlert1个确定void确认弹窗showConfirm2个确认/取消boolean列表选择showActionSheet多个选项number二、完整使用步骤2.1 安装依赖ohpminstallpura/harmony-utils2.2 提示弹窗import{DialogUtil}frompura/harmony-utils;Button(显示提示弹窗).width(100%).onClick((){try{DialogUtil.showAlert(提示,操作已完成);this.result提示弹窗已显示 ;}catch(e){this.result异常: e;}})2.3 确认弹窗Button(显示确认弹窗).width(100%).onClick(async(){try{letconfirmedawaitDialogUtil.showConfirm(确认,是否删除此文件);this.result用户选择:${confirmed?确认 ✅:取消 ❌};}catch(e){this.result异常: e;}})2.4 列表选择弹窗Button(显示选择弹窗).width(100%).onClick(async(){try{letindexawaitDialogUtil.showActionSheet([拍照,相册,取消]);this.result选择了: 第${index}项;}catch(e){this.result异常: e;}})三、完整页面示例import{DialogUtil}frompura/harmony-utils;EntryComponentstruct DialogDemo{Stateresult:string;build(){Column({space:12}){Button(提示弹窗).width(100%).onClick((){DialogUtil.showAlert(提示,操作成功);});Button(确认弹窗).width(100%).onClick(async(){letokawaitDialogUtil.showConfirm(确认,是否继续);this.resultok?确认:取消;});Button(选择弹窗).width(100%).onClick(async(){letidxawaitDialogUtil.showActionSheet([选项1,选项2]);this.result选择:${idx};});Text(this.result).fontSize(14).fontColor(#333333)}.padding(16)}}四、进阶用法4.1 删除确认import{DialogUtil,ToastUtil}frompura/harmony-utils;asyncfunctionconfirmDelete(filename:string):Promisevoid{letconfirmedawaitDialogUtil.showConfirm(删除确认,确定删除${filename}吗此操作不可恢复。);if(confirmed){FileUtil.deleteFile(filename);ToastUtil.show(已删除);}}4.2 图片选择asyncfunctionselectImageSource():Promisestring{letindexawaitDialogUtil.showActionSheet([拍照,从相册选择,取消]);if(index0)returncamera;if(index1)returngallery;returncancel;}五、注意事项异步等待确认和选择弹窗需使用await等待结果UI线程弹窗需在主线程显示弹窗叠加避免同时显示多个弹窗初始化依赖使用前需确保AppUtil.init()已调用文案规范弹窗文案应简洁明了六、常见问题Q1: showConfirm()返回值一直是false确保使用await等待用户操作结果。Q2: 弹窗显示后页面还能操作吗弹窗显示时页面被遮罩无法操作这是正常的模态行为。Q3: 可以自定义弹窗样式吗DialogUtil提供标准样式如需自定义请使用ArkUI的自定义弹窗。Q4: showActionSheet()取消时返回什么取消时通常返回-1或最后一个索引具体取决于实现。总结DialogUtil的弹窗方法为用户交互提供了标准化支持。本文详细介绍了核心API、使用步骤、完整示例、进阶用法以及常见问题的解决方案。开发者可以根据场景选择提示、确认或列表选择弹窗。本文基于pura/harmony-utils工具库更多功能请参考官方文档与后续系列文章。
前言弹窗是应用与用户交互的重要方式用于信息确认、操作提示、数据输入等。pura/harmony-utils的DialogUtil封装了常用弹窗方法简化了弹窗的创建和显示。本文将从API说明、代码实战、进阶用法、常见问题等多个维度进行全面讲解帮助开发者快速掌握并应用到实际项目中。一、DialogUtil核心APIDialogUtil提供了以下弹窗方法方法说明返回类型使用场景showAlert(title, message)显示提示弹窗void信息提示showConfirm(title, message)显示确认弹窗boolean操作确认showActionSheet(options)显示列表选择弹窗number选项选择1.1 核心特性简洁易用封装复杂API为一行调用降低使用门槛类型安全完整的TypeScript类型定义编译期即可发现错误异常处理内置异常捕获机制避免运行时崩溃多种样式支持提示、确认、列表选择三种弹窗1.2 弹窗类型对照类型方法按钮数返回值提示弹窗showAlert1个确定void确认弹窗showConfirm2个确认/取消boolean列表选择showActionSheet多个选项number二、完整使用步骤2.1 安装依赖ohpminstallpura/harmony-utils2.2 提示弹窗import{DialogUtil}frompura/harmony-utils;Button(显示提示弹窗).width(100%).onClick((){try{DialogUtil.showAlert(提示,操作已完成);this.result提示弹窗已显示 ;}catch(e){this.result异常: e;}})2.3 确认弹窗Button(显示确认弹窗).width(100%).onClick(async(){try{letconfirmedawaitDialogUtil.showConfirm(确认,是否删除此文件);this.result用户选择:${confirmed?确认 ✅:取消 ❌};}catch(e){this.result异常: e;}})2.4 列表选择弹窗Button(显示选择弹窗).width(100%).onClick(async(){try{letindexawaitDialogUtil.showActionSheet([拍照,相册,取消]);this.result选择了: 第${index}项;}catch(e){this.result异常: e;}})三、完整页面示例import{DialogUtil}frompura/harmony-utils;EntryComponentstruct DialogDemo{Stateresult:string;build(){Column({space:12}){Button(提示弹窗).width(100%).onClick((){DialogUtil.showAlert(提示,操作成功);});Button(确认弹窗).width(100%).onClick(async(){letokawaitDialogUtil.showConfirm(确认,是否继续);this.resultok?确认:取消;});Button(选择弹窗).width(100%).onClick(async(){letidxawaitDialogUtil.showActionSheet([选项1,选项2]);this.result选择:${idx};});Text(this.result).fontSize(14).fontColor(#333333)}.padding(16)}}四、进阶用法4.1 删除确认import{DialogUtil,ToastUtil}frompura/harmony-utils;asyncfunctionconfirmDelete(filename:string):Promisevoid{letconfirmedawaitDialogUtil.showConfirm(删除确认,确定删除${filename}吗此操作不可恢复。);if(confirmed){FileUtil.deleteFile(filename);ToastUtil.show(已删除);}}4.2 图片选择asyncfunctionselectImageSource():Promisestring{letindexawaitDialogUtil.showActionSheet([拍照,从相册选择,取消]);if(index0)returncamera;if(index1)returngallery;returncancel;}五、注意事项异步等待确认和选择弹窗需使用await等待结果UI线程弹窗需在主线程显示弹窗叠加避免同时显示多个弹窗初始化依赖使用前需确保AppUtil.init()已调用文案规范弹窗文案应简洁明了六、常见问题Q1: showConfirm()返回值一直是false确保使用await等待用户操作结果。Q2: 弹窗显示后页面还能操作吗弹窗显示时页面被遮罩无法操作这是正常的模态行为。Q3: 可以自定义弹窗样式吗DialogUtil提供标准样式如需自定义请使用ArkUI的自定义弹窗。Q4: showActionSheet()取消时返回什么取消时通常返回-1或最后一个索引具体取决于实现。总结DialogUtil的弹窗方法为用户交互提供了标准化支持。本文详细介绍了核心API、使用步骤、完整示例、进阶用法以及常见问题的解决方案。开发者可以根据场景选择提示、确认或列表选择弹窗。本文基于pura/harmony-utils工具库更多功能请参考官方文档与后续系列文章。
