基于ArkUI现有能力实现自定义弹窗封装方案
基于ArkUI现有能力实现自定义弹窗封装方案
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
怎么实现自定义弹窗1打开自定义弹窗2
695浏览 • 1回复 待解决
自定义弹窗自定义转场动画
379浏览 • 1回复 待解决
ArkUI如何实现自定义组件传递点击事件
1465浏览 • 2回复 待解决
如何在自定义弹窗中再次弹窗
800浏览 • 1回复 待解决
自定义弹窗(CustomDialog)是否具备拦截用户返回操作的能力
418浏览 • 1回复 待解决
自定义弹窗使用相关问题
347浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
405浏览 • 1回复 待解决
自定义弹窗的控制器(CustomDialogController)如何封装在普通class中
429浏览 • 1回复 待解决
自定义弹窗,自定义弹窗的使用更加灵活,适用于更多的业务场景
358浏览 • 1回复 待解决
自定义弹窗边界问题,自定义弹窗怎么设置左右边框的margin效果。
414浏览 • 1回复 待解决
如何设置自定义弹窗位置
654浏览 • 1回复 待解决
实现promptAction.openCustomDialog接口,全局调用自定义弹窗打开
326浏览 • 1回复 待解决
自定义弹窗传参使用报错未定义,不进行封装,则不会报错
585浏览 • 1回复 待解决
如何在ArkTS中实现自定义装饰器能力?
290浏览 • 1回复 待解决
如何实现隐私协议自定义弹窗,并在进入新页面时弹窗不消失?
307浏览 • 1回复 待解决
自定义弹窗能否在ts文件中定义和使用
666浏览 • 1回复 待解决
如何在全局实现一个自定义dialog弹窗
1045浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
759浏览 • 1回复 待解决
如何去除自定义弹窗的白色背景
665浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
647浏览 • 1回复 待解决
自定义弹窗如何设置点击遮盖层不关闭弹窗
589浏览 • 1回复 待解决
如何封装一个自定义Dialog对话框
844浏览 • 1回复 待解决
如何理解自定义弹窗中的gridCount参数
793浏览 • 1回复 待解决
自定义弹窗CustomDialog的maskRect属性设置问题
252浏览 • 1回复 待解决
自定义弹窗中的变量如何传递给页面
937浏览 • 1回复 待解决
自定义弹窗是应用开发需要实现的基础功能,包括但不限于文档中定义的模态、半模态、Toast等形式,封装一个好用且和UI组件解耦的弹窗组件是开发者的高频诉求
自定义弹窗通常的使用场景有:
场景一:在公共逻辑中触发弹窗。登录提示弹窗、全屏广告弹窗、网络请求与其他操作行为的提示、异常弹窗
场景二:侧滑手势拦截。隐私弹窗的拦截,退出登录时的确认弹窗
场景三:切换页面弹窗不消失。隐私弹窗和二级页面中的半模态弹窗
场景四:自定义弹出、关闭动画。从下往上的抽屉式弹出、关闭时从上往下收回
场景五:透明、模态、半模态背景。应用实现自定义的背景颜色
基于Navigation.Dialog的透明页面特性,可以用于实现弹窗效果
而且Navigation.Dialog存在于路由栈中,天然可以实现切换页面弹窗不消失
当前限制:
弹窗组件中的动效建议开发者自行实现
Navigation.Dialog自身无颜色,需要开发者自行实现模态遮罩,以及手势事件。
步骤一:封装路由工具类,并注册自定义弹窗组件
定义路由工具类AppRouter,并创建路由栈NavPathStack。
在根页面中注册NavPathStack。
在.navDestination注册封装的自定义弹窗组件DefaultDialog。
步骤二:封装弹窗UI组件
定义弹窗选项类AppDialogOption。
定义弹窗样式类AppDialogStyle。
创建自定义弹窗组件DefaultDialog
通过Stack布局及2个Column容器实现模态遮罩和自定义弹窗内容,通过NavDestinationMode定义页面类型。
通过.backgroundColor设置模态遮罩的背景颜色。
通过Stack.alignContent设置弹窗定位。
步骤三:封装弹窗控制器,与UI组件解耦
提供链式调用的Api。
步骤四:页面与弹窗,弹窗与弹窗之间传递参数。
通过路由跳转NavPathStack.pushPathByName传递参数。
在弹窗组件的.onReady事件中获取路由跳转参数。
使用NavPathStack中的onPop回调来接收上一个弹窗返回的参数。
上一个弹窗在关闭时传入参数。
步骤五:实现弹窗自定义动画
通过.transition属性分别实现背景和内容的转场动画。
通过监听模态遮罩的点击事件实现关闭动画。
步骤五:实现自定义弹窗内容
在弹窗内容的Column容器中传入WrappedBuilder来实现动态的自定义弹窗内容。
定义弹窗内容组件。
步骤六:侧滑手势拦截
在弹窗组件的.onBackPressed事件中进行拦截。
使用效果:
使用弹窗控制器即可在非UI业务逻辑中打开弹窗。
关闭弹窗。