【HarmonyOS NEXT】 自界说弹窗页面级层级控制办理方案

关键词：CuntomDialog自界说弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级非常
注：本期文章同样适用 OpenHarmony 的开发
题目存在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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。