摘要ArkUI 原生弹窗分为AlertDialog、TextPickerDialog、CustomDialog原生写法存在大量重复代码弹窗构造器重复创建、无统一淡入淡出动画、无法全局快捷调用、弹窗层级冲突、页面销毁弹窗残留、多弹窗叠加错乱。基于CustomDialogController封装全局弹窗工具封装提示弹窗、确认弹窗、输入弹窗、加载弹窗、自定义内容弹窗五大常用类型统一动画、层级、自动销毁逻辑支持页面内局部弹窗与全局快捷弹窗调用。API23 重构弹窗生命周期、遮罩层级、动画自动销毁机制修复弹窗页面退出不关闭、多层弹窗遮罩穿透、动画残留、重复创建控制器内存泄漏等问题。本文提供完整弹窗工具类搭配设置页、登录页、笔记列表实战调用给出弹窗生命周期、层级、动画规范是 UI 交互高频基础组件。关键词OpenHarmonyArkUIAPI23CustomDialog自定义弹窗全局弹窗加载弹窗确认弹窗弹窗动画一、引言1.1 弹窗开发痛点原生弹窗直接开发存在诸多冗余与兼容性问题每个页面重复 new CustomDialogController大量模板代码缺少统一淡入缩放动画弹窗弹出生硬页面销毁时弹窗未自动关闭后台残留遮罩阻塞交互多层弹窗层级管理混乱底层弹窗可点击穿透加载弹窗无全局统一管理多处重复实现 loading确认 / 提示弹窗按钮文字、回调重复编写。封装统一弹窗工具实现内置 5 类高频弹窗提示框、确认框、单行输入框、全局加载框、自定义布局弹窗统一弹出 / 关闭淡入缩放动画全局样式统一自动管控控制器生命周期页面退出自动关闭所有弹窗遮罩锁定底层页面禁止穿透点击极简一行代码唤起弹窗无需重复定义 Builder 控制器。API23 弹窗核心升级变更CustomDialogController新增自动回收机制页面销毁自动释放控制器遮罩层mask增强拦截杜绝底层页面穿透点击弹窗动画生命周期绑定关闭动画执行完毕再销毁弹窗实例优化多弹窗栈管理顺序弹出、顺序关闭避免布局错乱修复弹窗多次快速唤起导致多个控制器叠加堆积。1.2 核心模块依赖etsimport CustomDialogController from ohos.arkui.dialog.CustomDialogController import animateTo from ohos.arkui.animateTo二、全局弹窗工具封装 utils/dialog_util.etsetsimport CustomDialogController from ohos.arkui.dialog.CustomDialogController import animateTo from ohos.arkui.animateTo import promptAction from ohos.promptAction // 全局存储当前打开的弹窗控制器页面销毁批量关闭 const dialogPool: CustomDialogController[] [] // 弹窗基础配置 interface DialogBaseOpt { title?: string content: string cancelText?: string confirmText?: string } // 输入弹窗配置 interface InputDialogOpt extends DialogBaseOpt { placeholder?: string defaultText?: string } class DialogUtil { private static instance: DialogUtil static getInstance(): DialogUtil { if (!DialogUtil.instance) DialogUtil.instance new DialogUtil() return DialogUtil.instance } // 注册控制器到池用于页面销毁统一关闭 private addCtrl(ctrl: CustomDialogController) { dialogPool.push(ctrl) } // 页面销毁关闭全部弹窗 closeAllDialog() { dialogPool.forEach(ctrl { try { ctrl.close() } catch (e) {} }) dialogPool.length 0 } // 1. 纯提示弹窗仅确认按钮 alert(opt: DialogBaseOpt) { const builder () { CustomDialog struct AlertDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 title: string opt.title ?? 提示 content: string opt.content confirmTxt: string opt.confirmText ?? 确定 aboutToAppear() { animateTo({ duration: 260, curve: Curve.EaseOut }, () { this.scale 1 this.opacity 1 }) } build() { Column({ space: 20 }) { Text(this.title).fontSize(20).fontWeight(500) Text(this.content).fontSize(16).fontColor(#666).textAlign(TextAlign.Center) Button(this.confirmTxt) .width(100%) .height(44) .backgroundColor(#007DFF) .onClick(() { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() }) }) } .width(280) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) .animation({ duration: 260, curve: Curve.EaseOut }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 2. 确认弹窗取消确认双按钮带回调 confirm(opt: DialogBaseOpt, confirmCb: () void) { const builder () { CustomDialog struct ConfirmDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 title: string opt.title ?? 提示 content: string opt.content cancelTxt: string opt.cancelText ?? 取消 confirmTxt: string opt.confirmText ?? 确认 okCallback: () void confirmCb aboutToAppear() { animateTo({ duration: 260 }, () { this.scale 1 this.opacity 1 }) } // 关闭淡出动画 closeAnim(cb?: () void) { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() if (cb) cb() }) } build() { Column({ space: 20 }) { Text(this.title).fontSize(20).fontWeight(500) Text(this.content).fontSize(16).fontColor(#666).textAlign(TextAlign.Center) Row({ space: 12 }) { Button(this.cancelTxt) .layoutWeight(1) .height(44) .backgroundColor(#EEEEEE) .fontColor(#333) .onClick(() this.closeAnim()) Button(this.confirmTxt) .layoutWeight(1) .height(44) .backgroundColor(#007DFF) .onClick(() this.closeAnim(this.okCallback)) } .width(100%) } .width(300) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 3. 单行输入弹窗 input(opt: InputDialogOpt, confirmCb: (val: string) void) { const builder () { CustomDialog struct InputDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 State text: string opt.defaultText ?? title: string opt.title ?? 请输入 placeholder: string opt.placeholder ?? confirmCb: (s: string) void confirmCb aboutToAppear() { animateTo({ duration: 260 }, () { this.scale 1 this.opacity 1 }) } closeAnim(cb?: () void) { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() if (cb) cb() }) } build() { Column({ space: 18 }) { Text(this.title).fontSize(20).fontWeight(500) TextInput({ text: this.text, placeholder: this.placeholder }) .width(100%) .height(44) .onChange(v this.text v) Row({ space: 12 }) { Button(取消).layoutWeight(1).backgroundColor(#eee) .onClick(() this.closeAnim()) Button(确定).layoutWeight(1).backgroundColor(#007DFF) .onClick(() this.closeAnim(() this.confirmCb(this.text))) } .width(100%) } .width(320) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 4. 全局加载弹窗无按钮代码手动关闭 showLoading(text: string 加载中...) { const builder () { CustomDialog struct LoadingDialog { controller: CustomDialogController msg: string text State rotate: number 0 aboutToAppear() { // 无限旋转加载动画 animateTo({ duration: 1200, iterations: Infinity, curve: Curve.Linear }, () { this.rotate 360 }) } build() { Column({ space: 12 }) { Text(⟳).fontSize(36).rotate({ angle: this.rotate }) Text(this.msg).fontSize(16).fontColor(Color.White) } .width(140) .height(140) .backgroundColor(#000000AA) .borderRadius(12) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } } export default DialogUtil.getInstance()三、页面实战调用示例3.1 笔记列表删除确认弹窗etsimport DialogUtil from ../utils/dialog_util import RdbUtil from ../utils/rdb_util Entry Component struct NoteList { // 删除笔记弹窗确认 async delNote(id: number) { DialogUtil.confirm({ title: 删除提示, content: 确定要删除这条笔记吗删除后无法恢复 }, async () { await RdbUtil.deleteNote(id) DialogUtil.alert({ content: 删除成功 }) await this.refreshData() }) } build() { List() { ForEach(this.noteList, item { ListItem() { Row() { Text(item.title).layoutWeight(1) Button(删除).backgroundColor(#f56c6c) .onClick(() this.delNote(item.id)) } } }) } } aboutToDisappear() { // 页面退出关闭所有弹窗防止残留遮罩 DialogUtil.closeAllDialog() } }3.2 新建笔记输入弹窗etsButton(新建笔记) .onClick(() { DialogUtil.input({ title: 新建笔记, placeholder: 请输入笔记标题, defaultText: }, async (title) { if (!title) { DialogUtil.alert({ content: 标题不能为空 }) return } await RdbUtil.addNote(title, ); await this.refreshData(); }) })3.3 网络请求全局加载弹窗etsasync function loadNewsData() { DialogUtil.showLoading(资讯加载中...) const res await HttpUtil.get(/news/list) DialogUtil.closeAllDialog() if (res) this.newsList res.data }3.4 简单提示弹窗etsDialogUtil.alert({ title: 操作完成, content: 数据保存成功 })四、弹窗开发规范4.1 生命周期强制规范页面aboutToDisappear必须调用DialogUtil.closeAllDialog()加载弹窗请求结束后统一关闭全部弹窗避免遮罩卡住页面弹窗关闭必须走完淡出动画再执行回调销毁控制器禁止直接 close。4.2 遮罩与交互规范所有业务弹窗开启mask:true底层页面不可点击穿透autoCancel:false禁止点击遮罩关闭弹窗避免误触加载弹窗全局独占遮罩阻断所有页面操作。4.3 动画统一规范弹出scale 0.9→1、opacity 0→1时长 260ms关闭scale 1→0.9、opacity 1→0时长 220ms加载旋转动画使用匀速 Linear无限循环。4.4 分层业务使用规范简单成功 / 失败提示alert 单按钮弹窗删除、退出、清空高危操作confirm 双按钮确认弹窗新建标题、编辑备注input 单行输入弹窗网络请求、文件上传、数据库批量操作showLoading 加载弹窗。五、API23 升级高频问题与解决方案问题 1打开弹窗后返回上一页遮罩依旧挡住页面无法操作 解决页面 aboutToDisappear 调用 closeAllDialog 批量关闭所有控制器。问题 2快速多次点击按钮弹出多层弹窗堆叠错乱 解决弹窗池统一管理页面销毁全部回收业务层增加 loading 状态锁拦截重复点击。问题 3弹窗关闭回调提前执行动画还没消失页面就刷新 解决动画 finish 回调内执行 controller.close 和业务回调。问题 4点击弹窗外部空白区域弹窗消失 解决创建控制器配置 autoCancel: false。问题 5加载弹窗旋转动画页面退出后还在后台运行耗电 解决页面销毁统一关闭控制器动画实例同步销毁。六、总结DialogUtil 统一封装四类高频业务弹窗标准化弹出 / 关闭动画、遮罩拦截、生命周期自动回收一行代码即可唤起弹窗省去页面重复定义 CustomDialogBuilder 与控制器的冗余模板代码。 API23 完善弹窗控制器生命周期管理、遮罩拦截、动画绑定机制彻底解决旧版弹窗遮罩穿透、页面退出残留、多层弹窗错乱等问题。工具可搭配前文 RDB、Http、页面路由全套工具使用是所有项目 UI 交互必备通用底层组件。
摘要ArkUI 原生弹窗分为AlertDialog、TextPickerDialog、CustomDialog原生写法存在大量重复代码弹窗构造器重复创建、无统一淡入淡出动画、无法全局快捷调用、弹窗层级冲突、页面销毁弹窗残留、多弹窗叠加错乱。基于CustomDialogController封装全局弹窗工具封装提示弹窗、确认弹窗、输入弹窗、加载弹窗、自定义内容弹窗五大常用类型统一动画、层级、自动销毁逻辑支持页面内局部弹窗与全局快捷弹窗调用。API23 重构弹窗生命周期、遮罩层级、动画自动销毁机制修复弹窗页面退出不关闭、多层弹窗遮罩穿透、动画残留、重复创建控制器内存泄漏等问题。本文提供完整弹窗工具类搭配设置页、登录页、笔记列表实战调用给出弹窗生命周期、层级、动画规范是 UI 交互高频基础组件。关键词OpenHarmonyArkUIAPI23CustomDialog自定义弹窗全局弹窗加载弹窗确认弹窗弹窗动画一、引言1.1 弹窗开发痛点原生弹窗直接开发存在诸多冗余与兼容性问题每个页面重复 new CustomDialogController大量模板代码缺少统一淡入缩放动画弹窗弹出生硬页面销毁时弹窗未自动关闭后台残留遮罩阻塞交互多层弹窗层级管理混乱底层弹窗可点击穿透加载弹窗无全局统一管理多处重复实现 loading确认 / 提示弹窗按钮文字、回调重复编写。封装统一弹窗工具实现内置 5 类高频弹窗提示框、确认框、单行输入框、全局加载框、自定义布局弹窗统一弹出 / 关闭淡入缩放动画全局样式统一自动管控控制器生命周期页面退出自动关闭所有弹窗遮罩锁定底层页面禁止穿透点击极简一行代码唤起弹窗无需重复定义 Builder 控制器。API23 弹窗核心升级变更CustomDialogController新增自动回收机制页面销毁自动释放控制器遮罩层mask增强拦截杜绝底层页面穿透点击弹窗动画生命周期绑定关闭动画执行完毕再销毁弹窗实例优化多弹窗栈管理顺序弹出、顺序关闭避免布局错乱修复弹窗多次快速唤起导致多个控制器叠加堆积。1.2 核心模块依赖etsimport CustomDialogController from ohos.arkui.dialog.CustomDialogController import animateTo from ohos.arkui.animateTo二、全局弹窗工具封装 utils/dialog_util.etsetsimport CustomDialogController from ohos.arkui.dialog.CustomDialogController import animateTo from ohos.arkui.animateTo import promptAction from ohos.promptAction // 全局存储当前打开的弹窗控制器页面销毁批量关闭 const dialogPool: CustomDialogController[] [] // 弹窗基础配置 interface DialogBaseOpt { title?: string content: string cancelText?: string confirmText?: string } // 输入弹窗配置 interface InputDialogOpt extends DialogBaseOpt { placeholder?: string defaultText?: string } class DialogUtil { private static instance: DialogUtil static getInstance(): DialogUtil { if (!DialogUtil.instance) DialogUtil.instance new DialogUtil() return DialogUtil.instance } // 注册控制器到池用于页面销毁统一关闭 private addCtrl(ctrl: CustomDialogController) { dialogPool.push(ctrl) } // 页面销毁关闭全部弹窗 closeAllDialog() { dialogPool.forEach(ctrl { try { ctrl.close() } catch (e) {} }) dialogPool.length 0 } // 1. 纯提示弹窗仅确认按钮 alert(opt: DialogBaseOpt) { const builder () { CustomDialog struct AlertDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 title: string opt.title ?? 提示 content: string opt.content confirmTxt: string opt.confirmText ?? 确定 aboutToAppear() { animateTo({ duration: 260, curve: Curve.EaseOut }, () { this.scale 1 this.opacity 1 }) } build() { Column({ space: 20 }) { Text(this.title).fontSize(20).fontWeight(500) Text(this.content).fontSize(16).fontColor(#666).textAlign(TextAlign.Center) Button(this.confirmTxt) .width(100%) .height(44) .backgroundColor(#007DFF) .onClick(() { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() }) }) } .width(280) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) .animation({ duration: 260, curve: Curve.EaseOut }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 2. 确认弹窗取消确认双按钮带回调 confirm(opt: DialogBaseOpt, confirmCb: () void) { const builder () { CustomDialog struct ConfirmDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 title: string opt.title ?? 提示 content: string opt.content cancelTxt: string opt.cancelText ?? 取消 confirmTxt: string opt.confirmText ?? 确认 okCallback: () void confirmCb aboutToAppear() { animateTo({ duration: 260 }, () { this.scale 1 this.opacity 1 }) } // 关闭淡出动画 closeAnim(cb?: () void) { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() if (cb) cb() }) } build() { Column({ space: 20 }) { Text(this.title).fontSize(20).fontWeight(500) Text(this.content).fontSize(16).fontColor(#666).textAlign(TextAlign.Center) Row({ space: 12 }) { Button(this.cancelTxt) .layoutWeight(1) .height(44) .backgroundColor(#EEEEEE) .fontColor(#333) .onClick(() this.closeAnim()) Button(this.confirmTxt) .layoutWeight(1) .height(44) .backgroundColor(#007DFF) .onClick(() this.closeAnim(this.okCallback)) } .width(100%) } .width(300) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 3. 单行输入弹窗 input(opt: InputDialogOpt, confirmCb: (val: string) void) { const builder () { CustomDialog struct InputDialog { controller: CustomDialogController State scale: number 0.9 State opacity: number 0 State text: string opt.defaultText ?? title: string opt.title ?? 请输入 placeholder: string opt.placeholder ?? confirmCb: (s: string) void confirmCb aboutToAppear() { animateTo({ duration: 260 }, () { this.scale 1 this.opacity 1 }) } closeAnim(cb?: () void) { animateTo({ duration: 220 }, () { this.scale 0.9 this.opacity 0 }, () { this.controller.close() if (cb) cb() }) } build() { Column({ space: 18 }) { Text(this.title).fontSize(20).fontWeight(500) TextInput({ text: this.text, placeholder: this.placeholder }) .width(100%) .height(44) .onChange(v this.text v) Row({ space: 12 }) { Button(取消).layoutWeight(1).backgroundColor(#eee) .onClick(() this.closeAnim()) Button(确定).layoutWeight(1).backgroundColor(#007DFF) .onClick(() this.closeAnim(() this.confirmCb(this.text))) } .width(100%) } .width(320) .padding(24) .backgroundColor(Color.White) .borderRadius(16) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } // 4. 全局加载弹窗无按钮代码手动关闭 showLoading(text: string 加载中...) { const builder () { CustomDialog struct LoadingDialog { controller: CustomDialogController msg: string text State rotate: number 0 aboutToAppear() { // 无限旋转加载动画 animateTo({ duration: 1200, iterations: Infinity, curve: Curve.Linear }, () { this.rotate 360 }) } build() { Column({ space: 12 }) { Text(⟳).fontSize(36).rotate({ angle: this.rotate }) Text(this.msg).fontSize(16).fontColor(Color.White) } .width(140) .height(140) .backgroundColor(#000000AA) .borderRadius(12) } } } const ctrl new CustomDialogController({ builder: builder(), mask: true, autoCancel: false }) this.addCtrl(ctrl) ctrl.open() } } export default DialogUtil.getInstance()三、页面实战调用示例3.1 笔记列表删除确认弹窗etsimport DialogUtil from ../utils/dialog_util import RdbUtil from ../utils/rdb_util Entry Component struct NoteList { // 删除笔记弹窗确认 async delNote(id: number) { DialogUtil.confirm({ title: 删除提示, content: 确定要删除这条笔记吗删除后无法恢复 }, async () { await RdbUtil.deleteNote(id) DialogUtil.alert({ content: 删除成功 }) await this.refreshData() }) } build() { List() { ForEach(this.noteList, item { ListItem() { Row() { Text(item.title).layoutWeight(1) Button(删除).backgroundColor(#f56c6c) .onClick(() this.delNote(item.id)) } } }) } } aboutToDisappear() { // 页面退出关闭所有弹窗防止残留遮罩 DialogUtil.closeAllDialog() } }3.2 新建笔记输入弹窗etsButton(新建笔记) .onClick(() { DialogUtil.input({ title: 新建笔记, placeholder: 请输入笔记标题, defaultText: }, async (title) { if (!title) { DialogUtil.alert({ content: 标题不能为空 }) return } await RdbUtil.addNote(title, ); await this.refreshData(); }) })3.3 网络请求全局加载弹窗etsasync function loadNewsData() { DialogUtil.showLoading(资讯加载中...) const res await HttpUtil.get(/news/list) DialogUtil.closeAllDialog() if (res) this.newsList res.data }3.4 简单提示弹窗etsDialogUtil.alert({ title: 操作完成, content: 数据保存成功 })四、弹窗开发规范4.1 生命周期强制规范页面aboutToDisappear必须调用DialogUtil.closeAllDialog()加载弹窗请求结束后统一关闭全部弹窗避免遮罩卡住页面弹窗关闭必须走完淡出动画再执行回调销毁控制器禁止直接 close。4.2 遮罩与交互规范所有业务弹窗开启mask:true底层页面不可点击穿透autoCancel:false禁止点击遮罩关闭弹窗避免误触加载弹窗全局独占遮罩阻断所有页面操作。4.3 动画统一规范弹出scale 0.9→1、opacity 0→1时长 260ms关闭scale 1→0.9、opacity 1→0时长 220ms加载旋转动画使用匀速 Linear无限循环。4.4 分层业务使用规范简单成功 / 失败提示alert 单按钮弹窗删除、退出、清空高危操作confirm 双按钮确认弹窗新建标题、编辑备注input 单行输入弹窗网络请求、文件上传、数据库批量操作showLoading 加载弹窗。五、API23 升级高频问题与解决方案问题 1打开弹窗后返回上一页遮罩依旧挡住页面无法操作 解决页面 aboutToDisappear 调用 closeAllDialog 批量关闭所有控制器。问题 2快速多次点击按钮弹出多层弹窗堆叠错乱 解决弹窗池统一管理页面销毁全部回收业务层增加 loading 状态锁拦截重复点击。问题 3弹窗关闭回调提前执行动画还没消失页面就刷新 解决动画 finish 回调内执行 controller.close 和业务回调。问题 4点击弹窗外部空白区域弹窗消失 解决创建控制器配置 autoCancel: false。问题 5加载弹窗旋转动画页面退出后还在后台运行耗电 解决页面销毁统一关闭控制器动画实例同步销毁。六、总结DialogUtil 统一封装四类高频业务弹窗标准化弹出 / 关闭动画、遮罩拦截、生命周期自动回收一行代码即可唤起弹窗省去页面重复定义 CustomDialogBuilder 与控制器的冗余模板代码。 API23 完善弹窗控制器生命周期管理、遮罩拦截、动画绑定机制彻底解决旧版弹窗遮罩穿透、页面退出残留、多层弹窗错乱等问题。工具可搭配前文 RDB、Http、页面路由全套工具使用是所有项目 UI 交互必备通用底层组件。
)
)
