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

最新推荐文章于 2025-06-06 11:28:31 发布
最新推荐文章于 2025-06-06 11:28:31 发布
阅读量1k 收藏 19
点赞数 25
CC 4.0 BY-SA版权
分类专栏： 移动开发 鸿蒙开发 HarmonyOS 文章标签： harmonyos ui 鸿蒙开发 多线程 缓存 ArkUI 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142003238

往期知识点整理

场景描述

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

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

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

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

场景二：侧滑手势拦截

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

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

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

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

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

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

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

方案描述

1. 使用Navigation.Dialog

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

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

当前限制：

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

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

演示效果：

最低0.47元/天 解锁文章

200万优质内容无限畅学
鸿蒙应用开发之弹窗
xiangzhihong8的专栏
10-26 1098
自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现，然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。下面我们通过一个兴趣爱好的选择框来介绍自定义弹窗的使用。从上面的效果图可以看出，这个选择框是一个多选的列表弹窗，我们可以使用装饰器@CustomDialog，结合List组件来完成这个弹窗布局，实现步骤如下：1，初始化弹窗数据。
鸿蒙Harmony应用开发—ArkTS-全局UI方法（警告弹窗）
m0_64420071的博客
03-21 1527
使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。
基于ArkUI现有能力实现自定义弹窗封装方案
hongxiaomeng的博客
05-09 760
OpenHarmony实战开发-如何实现自定义弹窗 (CustomDialog)
m0_70749039的博客
04-27 1424
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
ArkUI-X 与原生鸿蒙 ArkUI：同源共生，差异何在？（侧重框架对比与关系）
最新发布
m0_59315734的博客
06-06 1318
《ArkUI-X与原生ArkUI框架对比分析》 摘要：鸿蒙生态中的ArkUI-X与原生ArkUI框架具有同源设计基因，采用相同的声明式UI范式，但在定位与能力上存在显著差异。原生ArkUI深度集成HarmonyOS系统能力，支持分布式特性与高性能渲染，适用于系统级开发；ArkUI-X则聚焦跨平台扩展，通过抽象层实现iOS/Android/HarmonyOS多端适配。二者在分布式能力支持、平台特性适配及开发工具链上呈现互补关系
【鸿蒙开发细枝末节】自定义弹窗实现
yihanss的博客
04-09 1886
创建一个新文件，我这里起名叫build() {} }这个注解表示这个控件是对话框如果不写这个的话，无法被其他文件调用接下来我们在build里面写界面，先分析一下效果图：一个输入框TextInput，两个按钮Button水平排列，输入框和按钮竖直排列。最外层使用Column排列输入框和按钮，两个按钮使用Row包起来横排，按钮中间用Blank填充空隙。build() {Column() {TextInput({ placeholder: '请输入内容' }) //输入框。
【鸿蒙实战开发】基于ArkUI现有能力实现自定义弹窗封装方案
HarmonyOSMN的博客
06-28 2340
从下往上的抽屉式弹出、关闭时从上往下收回。
鸿蒙(HarmonyOS)实战开发篇——基于ArkUI现有能力实现自定义弹窗封装方案
lc748258的博客
09-27 1135
从下往上的抽屉式弹出、关闭时从上往下收回。
鸿蒙UI开发——全局自定义弹窗实现
harmonyClassRoom的博客
12-25 2343
在使用弹窗前，我们需要创建ComponentContent对象，ComponentContent用于定义自定义弹窗的内容。创建一个ComponentContent对象的实例代码如下(核心代码 23 ~ 24行)：​​​​​。
【鸿蒙软件开发】自定义弹窗（CustomDialog）
m0_62599305的博客
10-25 7306
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
【鸿蒙南向开发】OpenHarmony——ets自定义弹窗UI组件封装
HarmonyOS_666的博客
08-06 1198
confirmText:string = '确认'cancelText:string = '取消'build(){}自定义确认弹窗可自定义传入的参数有：​可选参数：标题title（默认值：“”），正文内容content（默认值：“”），确认按钮字体颜色confirmFontColor（默认值：#E84026），取消按钮字体颜色cancelFontColor（默认值：#0A59F7），确认按钮文案（默认值：确认），取消按钮文案（默认值：取消）​必须参数。
Harmony鸿蒙实现隐私政策自定义弹窗
le0102的博客
07-23 1350
Harmony鸿蒙实现隐私政策自定义弹窗 这个跟之前的，类AlertDialog的CommonDialog是一样的，不过这个是可以自定义布局的 效果如下： 一、新建一个PrivacyDialog public class PrivacyDialog extends CommonDialog { private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MY_TAG"); private C
HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 5507
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
HarmonyOS开发学习：定位相关知识（Locationkit）
DMZDAMS的博客
07-08 1079
HarmonyOS 应用开发工具DevEco Studio也没有提供读取存储器的功能，所以做一个简单版本的应用级别浏览器还是有必要的。
鸿蒙(HarmonyOS)常见的三种弹窗方式
安辉
08-31 2833
最近有一个想法，做一个针对鸿蒙官方API的工具箱项目，介绍常用的控件，以及在项目中如何使用，今天介绍Harmony中如何实现弹窗功能
鸿蒙NEXT开发【应用自定义弹窗开发实践】应用框架开发
houxiliOH的博客
09-27 1056
弹窗是应用开发需要实现的基础功能，通常用来展示用户当前需要或用户必须关注的信息或操作，可用于广告、中奖、警告、软件更新等与用户交互响应的操作。在应用开发中，经常需要实现自定义UI和功能要求，系统弹窗往往无法满足需求，此时就需要使用到自定义弹窗了。
鸿蒙5.0版开发：ArkUI框架开发-自定义弹窗 (CustomDialog)
m0_73088370的博客
10-31 454
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。
鸿蒙API13开发【自定义弹窗 (CustomDialog)】ArkTS组件
鸿蒙的技术博客
02-08 1005
点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。
鸿蒙开发--自定义弹窗
2301_79900717的博客
09-10 458
首先是自定义弹窗模块//需要new一个CustomDialogController类型的变量build() {Column(){Text('是否改变父组件的文字')然后是主模块对应调用自定义弹窗//导入自定义弹窗模块@Entry@Component//初始化一个控制器，里面的builder后面的内容为自定义弹窗模块的名字})build() {Column(){Button('点我跳出弹窗')//控制弹窗的打开})以上就是自定义弹出没有设置最简单的调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值