HarmonyOS/OpenHarmony 自定义弹窗页面级层级控制解决方案

关键词:CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常

问题存在API版本:API10 - API12(该问题已反馈,期望后续官方能增加页面级控制能力)

在正常的鸿蒙app开发过程中,时常会加载一些弹窗内容,比如隐私政策弹窗、新手引导弹窗、营销广告弹窗等。那么我们会选择使用 CuntomDialog 或创建 SubWindow 的形式去展示出我们的弹窗,但是目前鸿蒙的弹窗存在 2 个问题

①弹窗无法保持在目标页面的问题:鸿蒙中自定义弹窗或子窗口由于展示优先级高于其他组件,则会出现当弹窗正在展示时跳转进入下一个页面后,弹窗依旧展示在 app 最上层的异常情况,或当折叠屏设备分屏后展示出弹窗,合起折叠屏后,弹窗同样会展示在下一个页面上的异常情况。

②无法控制弹窗展示优先级的问题:如当前存在 2 个弹窗,先展示弹窗 B,后展示弹窗 A,同时要求弹窗 A 展示在弹窗 B 上层,当前的鸿蒙弹窗并不支持这样的操作,仅为谁后来谁在上的原则。

 解决前    解决后

那么我们应该如何解决这 2 种情况?想要解决该问题,那我们就不能再去使用这两种弹窗方式。要想弹窗仅展示在我们的目标页面中,那么我们就应该使用 Stack 层叠布局的形式去改造我们的页面整体结构,从页面左上角 0vp 处摆放一个宽高均为 0vp 的组件当作我们的弹窗展示容器,将所有的弹窗都统一管理在该组件中,用状态变量实现控制显隐弹窗的操作,明确目标那么开始。

本期文章完整demo以上传至Gitee:Harmony 自定义弹窗页面级控制解决方案

1. Stack 布局改造页面结构

将以往弹窗逻辑由图1 调整至图2 ,第 2 步开始将介绍 DialogView 自定义组件的用法。

图1(改造前)

图2(改造后)

2. DialogView 自定义组件的实现

经过第 1 步的改造后,我们已经在页面左上角提前占位了弹窗展示区域,在该 DialogView 自定义组件中,统一管理我们的弹窗组件,这样我们也就可以自行编排布局控制弹窗的展示层级与先后顺序了。

可以使用 Column 组件直接控制弹窗展示顺序(当2个及以上的弹窗同时展示时,其他组件会在屏幕外等待展示,上一个弹窗隐藏后,下一个弹窗展示)
或使用 Stack 组件直接控制弹窗展示层级(当2个及以上的弹窗同时展示时,各弹窗同时展示在页面上,可自行摆放弹窗的上下层级关系)

这里我们就按照两个弹窗都展示在屏幕内的业务,使用 Stack 布局。

3. DialogViewController 控制器的实现

在前2步中已经初步实现了弹窗的页面级与层级的控制,那么如何做到弹窗动态的展示或隐藏操作?

首先我们需要了解,鸿蒙应用开发过程中,要想改变 UI 展示效果,需要配合使用一系列的状态装饰器,使属性成为状态变量,当被状态装饰器装饰的属性发生变化后,在页面UI中使用到该属性的地方,都会触发UI更新,如最直观的就是 @State 装饰器。

就目前场景而言,弹窗与主页面之间已经出现跨组件的情况了,实际开发过程中业务场景会更为复杂,所以我们可以直接使用 class 类配合 @Observed 装饰器实现跨组件之间的数据通讯,只需在父组件创建出目标对象,传递至弹窗组件,并用 @ObjectLink 绑定接收即可,这样做的好处是,不管途中经过多少组件,弹窗组件调用该对象方法,也能改变途中使用到该对象方法的UI,并且能够更好的统一管理所有的弹窗状态(或直接使用单例形式导出,在目标弹窗组件直接使用 @State 装饰器接收该单例对象即可,无需在根页面 new 出控制器对象进行逐级传递)。

如下图所示,DialogViewController 仅为 2 个弹窗展示状态的属性,并进行私有,使用对外提供的各种方法获取或改变二者属性的值。

更多装饰器相关使用请参考官方文档,此处就不过多赘述:harmonyOS文档中心 - 状态管理

4. 弹窗内布局如何编排

我们从步骤 1 开始改造布局到步骤 2 的自定义弹窗组件实现,都并未看到对弹窗进行宽度高度的设置,那我们的弹窗应该如何铺满屏幕?以 PrivacyDialog 为例,我们只需要在需要展示的弹窗上设置对应的宽度及高度即可,当弹窗不展示,则在第 2 步中 DialogView 的宽高为 0,该方式可避免在没有弹窗时的情况下,弹窗组件影响主页面触摸点击事件的影响。

5. 完整demo

本期文章完整demo已提交至Gitee,可回顶部查看。

6. end

此处打个广告介绍下我开发的 markdown 预览解析三方库,@luvi/lv-markdown-in

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/881217.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零散的知识

1.物化 在SQL中,物化(Materialization)是指将查询结果保存为物理数据结构以供后续使用的过程。这与普通的视图或查询不同,物化视图会存储查询的结果,而不是每次查询时都动态地重新计算数据。 ①物化视图 物化视图是一…

STM32 HAL 内部FLASH傻瓜式教程 各种型号单片机都适用主要解决网上例程HAL库无法写入问题

1、简介 本文主要针对网上例程FLASH无法写入问题,傻瓜式操作。 2、BSP_Flash.c #include "BSP_Flash.h" uint32_t FlashData; uint32_t Flashaddr = 0x08020000; static uint8_t stmflash_get_error_status(void) {uint32_t res;res = FLASH->SR;if (res &…

TIM(Timer)定时器的原理

一、介绍 硬件定时器的工作原理基于时钟信号源提供稳定的时钟信号作为计时器的基准。计数器从预设值开始计数,每当时钟信号到达时计数器递增。当计数器达到预设值时,定时器会触发一个中断信号通知中断控制器处理相应的中断服务程序。在中断服务程序中&a…

LeetCode讲解篇之239. 滑动窗口最大值

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们维护一个长度为k的窗口,然后窗口从数组最左边一直移动到最右边,记录过程中窗口中的最大值,就是答案 我们每次查询长度为k的窗口最大值是什么时间复杂度是O(k)的&#xff0…

千益畅行,旅游创业新模式的创新与发展

旅游创业的时代背景与旅游卡的崛起,在当今快节奏的时代,旅行成为人们生活中的重要部分,随着科技发展和市场需求的变化,旅游创业项目中的旅游卡应运而生。 其中,“千益畅行” 旅游卡作为新兴力量,在共享经济…

XHTML 简介

XHTML 简介 XHTML,即“可扩展超文本标记语言”(eXtensible HyperText Markup Language),是一种基于XML的标记语言,旨在取代HTML作为网页内容的标准格式。XHTML由万维网联盟(W3C)开发,旨在实现HTML向XML的过渡,提供更严格、更清晰的语法规则。本文将详细介绍XHTML的历…

rust中async/await的使用

在Rust中,async/await 用于编写异步代码。它允许您以同步的方式编写异步代码,使得异步操作更易于理解和编写。 安装依赖: cargo add futures cargo add async-std 使用示例: 示例1: use async_std::task::block_on;fn main() {block_on(hello()); }async fn hello() …

`git fetch` 检查更新

git fetch 是 Git 中的一个命令,主要用于从远程仓库获取最新的更新,但不会自动将这些更新合并到你的本地分支。它的主要作用是让你可以查看远程仓库的最新变化,而不改变你当前正在工作的代码。 1. 获取远程更新 git fetch 会从远程仓库下载…

【移动端】Viewport 视口

1. 什么是 Viewport(视口)? Viewport(视口)是指浏览器中用户可见的那部分网页内容的区域,简单来说,它是用户当前看到的网页的“窗口”区域。在不同的设备上,Viewport 的大小会有所不…

【SVN】一文读懂Subversion(SVN)

SVN 一、SVN简介1. 概念1.1 repository(源代码库)1.2 Checkout(提取)1.3 Commit(提交)1.4 Update (更新) 2. SVN的主要功能2.1 目录版本控制2.2 真实的版本历史2.3 自动提交2.4 纳入版本控管的元数据2.5 选…

MoveIt2-humble----Planning Around Objects

1 添加Planning Scene Interface头文件 #include <moveit/planning_scene_interface/planning_scene_interface.h>2 改变目标位姿 // Set a target Pose auto const target_pose [] {geometry_msgs::msg::Pose msg;msg.orientation.w 1.0;msg.position.x 0.28;msg.p…

Github 2024-10-06 php开源项目日报 Top10

根据Github Trendings的统计,今日(2024-10-06统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目10Blade项目2Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数量:24281 次…

Linux安装部署MySQL8.0加遇着问题解决

1.首先我先给个URL下载MySQL官方网站https://downloads.mysql.com/archives/community/ 2.选择Linux的红帽系统 3.接着选择红帽系统的7版本,x86 4.接着选择MySQL版本,此时我选择8.4.0,下载rpm bundle这个,下载下面这个就好 5.Windows文件上传到Linux系统 rz上传文件命令,找到…

【unity游戏开发】彻底理解AnimatorStateInfo,获取真实动画长度

前言 前置知识&#xff1a;设置参数后&#xff0c;下一个循环才会切换对应动画&#xff0c;所以在下一个循环获取真实的动画长度 AnimatorStateInfo是结构体&#xff01;值类型&#xff0c;要不断重复获取才是最新的 主要是自动设置trigger切换的动画自动切回上一个动画&#x…

Java中如何实现定时任务?

目录 一、定时任务 概念 作用 二、简单定时任务实现方式 1. Thread线程等待&#xff08;最原始最简单方式&#xff09; 2. 使用java.util.Timer Timer 优缺点分析 3. 使用JDK自带的ScheduledExecutorService schedule和scheduleAtFixedRate的区别 schedule侧重保持间隔…

高级java每日一道面试题-2024年10月5日-数据库篇[MySQL篇]-Mysql是如何回滚事务的?

如果有遗漏,评论区告诉我进行补充 面试官: Mysql是如何回滚事务的? 我回答: 在MySQL中&#xff0c;事务回滚是一个重要的机制&#xff0c;用于在发生错误或异常时撤销所有未提交的更改&#xff0c;确保数据库的一致性和完整性。事务回滚的过程涉及多个内部机制和数据结构&a…

B 私域模式升级:开源技术助力传统经销体系转型

一、引言 1.1 研究背景 随着市场竞争加剧&#xff0c;传统经销代理体系面临挑战。同时&#xff0c;开源技术发展迅速&#xff0c;为 B 私域升级带来新机遇。在当今数字化时代&#xff0c;企业面临着日益激烈的市场竞争。传统的经销代理体系由于管理效率低下、渠道局限、库存压…

贝锐蒲公英网盘首发,秒建私有云,高速远程访问

虽然公共网盘带来了不少便利&#xff0c;但是大家对隐私泄露和重要数据泄密的担忧也随之增加。如果想要确保数据安全&#xff0c;自建私有云似乎是一条出路&#xff0c;然而面对搭建私有云的复杂步骤&#xff0c;许多人感到力不从心&#xff0c;NAS设备的成本也往往让人望而却步…

项目——超级马里奥——Day(2)

争取今天晚上能搞一半啊&#xff0c;啊啊啊啊&#xff0c;感觉事多的忙不过来 设计思路&#xff1a; 1&#xff09;创建并完成常量类 ------->一张图片的情况 先完成对图片的封装------>把图片加载一遍 &#xff08;老实说&#xff0c;我也不太知道为什么&#xff0…

【项目安全设计】软件系统安全设计规范和标准(doc原件)

1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障 资料获取&#xff1a;私信或者进主页。…