【鸿蒙UI实战开发】基于ArkUI现有能力实现自定义弹窗封装方案

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 【鸿蒙实战开发】ArkTS多线程的多线程系列（一）：ArkTS多线能力入门
• 【鸿蒙实战开发】ArkTS多线程的多线程系列（二）：基于Sendable共享对象实现跨线程通信及UI状态刷新
• 【鸿蒙实战开发】ArkTS多线性的多线程系列(三)：基于单例实现跨线程缓存
• 【鸿蒙实战开发】ArkTS多线程的多线程系列（四）：基于生产者-消费者实现多线程协同
• 【鸿蒙实战开发】ArkTS多线程的多线程系列（五）：通过子线程实现全局弹窗
• 【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
• 【鸿蒙UI实战开发】基于原生能力的键盘控制
• 【鸿蒙UI实战开发】基于ArkUI现有能力实现自定义弹窗封装方案
• 持续更新中……

场景描述

自定义弹窗是应用开发需要实现的基础功能，包括但不限于HarmonyOS开发者文档中定义的模态、半模态、Toast等形式，封装一个好用且和UI组件解耦的弹窗组件是开发者的高频诉求

自定义弹窗通常的使用场景有：

场景一：在公共逻辑中触发弹窗

登录提示弹窗、全屏广告弹窗、网络请求与其他操作行为的提示、异常弹窗

场景二：侧滑手势拦截

隐私弹窗的拦截，退出登录时的确认弹窗

场景三：切换页面弹窗不消失

隐私弹窗和二级页面中的半模态弹窗

场景四：自定义弹出、关闭动画

从下往上的抽屉式弹出、关闭时从上往下收回

场景五：透明、模态、半模态背景

应用实现自定义的背景颜色

方案描述

1. 使用Navigation.Dialog

基于Navigation.Dialog的透明页面特性，可以用于实现弹窗效果

而且Navigation.Dialog存在于路由栈中，天然可以实现切换页面弹窗不消失

当前限制：

弹窗组件中的动效建议开发者自行实现

Navigation.Dialog自身无颜色，需要开发者自行实现模态遮罩，以及手势事件。

演示效果：