HarmonyOS 鸿蒙Next基于ArkUI现有能力实现自定义弹窗封装方案

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next基于ArkUI现有能力实现自定义弹窗封装方案

场景描述

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

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

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

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

场景二：侧滑手势拦截

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

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

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

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

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

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

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

方案描述

1. 使用Navigation.Dialog

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

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

当前限制：

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

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

演示效果：

1.gif

2.gif

3.gif

4.gif

对于少量弹窗的实现，可以直接使用Navigation来进行路由跳转，参考Navigation常见场景及解决方案

其他Navigation的使用也可参考上述文章

Harmonyos Next教程
21 回复

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

这个图中的demo能提供下吗 感谢

您好，当前技术文章配套的demo工程正在外发中，后续会发布至gitee上，敬请关注！

出来了吗

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

您好，目前还没。近两周内会分批外发，发布后会同步评论回复的！

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

别光分享，不给demo啊

您好，当前技术文章配套的demo工程正在外发中，后续会发布至gitee上，敬请关注！

会发在gitee的哪个仓库当中啊 我关注一下

demo 能提供一下么

官网就有，https://developer.huawei.com/consumer/cn/doc/harmonyos-samples-V5/samples-0000001162414961-V5?catalogVersion=V5 在 Developer Beta1 版本下面的 示列代码 页面 搜 “自定义弹框”

很值得学习
怎么感觉上的代码，缺胳膊少腿的。。。。能放全代码么  
public static build(builder: WrappedBuilder<Object[]>): AppDialog {

    let options: AppDialogOption = new AppDialogOption();


    options.view = builder;


    return AppDialog.buildWithOptions(options);


  }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这个方法哪里调用呢

您好，当前技术文章配套的demo工程正在外发中，后续会发布至gitee上，敬请关注！

此方法适用API9吗？
api11适用吗
感谢楼主，API11 ，已经跑通
有非 UI 页面调用 alert 和 actionsheet 吗 自定义那种的

楼主 demo 可以分享下吗？

您好，当前技术文章配套的demo工程正在外发中，后续会发布至gitee上，敬请关注！

回到顶部