上海做网站站优云一一十六,设计一套企业网站多少钱,软件应用技术学什么,wordpress新建栏目关键词#xff1a;CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常
问题存在API版本#xff1a;API10 - API12#xff08;该问题已反馈#xff0c;期望后续官方能增加页面级控制能力#xff09; 在正常的鸿蒙app开发过程中…关键词CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常
问题存在API版本API10 - API12该问题已反馈期望后续官方能增加页面级控制能力 在正常的鸿蒙app开发过程中时常会加载一些弹窗内容比如隐私政策弹窗、新手引导弹窗、营销广告弹窗等。那么我们会选择使用 CuntomDialog 或创建 SubWindow 的形式去展示出我们的弹窗但是目前鸿蒙的弹窗存在 2 个问题
①弹窗无法保持在目标页面的问题鸿蒙中自定义弹窗或子窗口由于展示优先级高于其他组件则会出现当弹窗正在展示时跳转进入下一个页面后弹窗依旧展示在 app 最上层的异常情况或当折叠屏设备分屏后展示出弹窗合起折叠屏后弹窗同样会展示在下一个页面上的异常情况。
②无法控制弹窗展示优先级的问题如当前存在 2 个弹窗先展示弹窗 B后展示弹窗 A同时要求弹窗 A 展示在弹窗 B 上层当前的鸿蒙弹窗并不支持这样的操作仅为谁后来谁在上的原则。 解决前 解决后
那么我们应该如何解决这 2 种情况想要解决该问题那我们就不能再去使用这两种弹窗方式。要想弹窗仅展示在我们的目标页面中那么我们就应该使用 Stack 层叠布局的形式去改造我们的页面整体结构从页面左上角 0vp 处摆放一个宽高均为 0vp 的组件当作我们的弹窗展示容器将所有的弹窗都统一管理在该组件中用状态变量实现控制显隐弹窗的操作明确目标那么开始。 本期文章完整demo以上传至GiteeHarmony 自定义弹窗页面级控制解决方案 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
