【鸿蒙ArkUI实战开发】基于ArkUI的透明页面效果

往期知识点整理

• 【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
• 【鸿蒙UI实战开发】基于原生能力的键盘控制
• 【鸿蒙UI实战开发】基于ArkUI现有能力实现自定义弹窗封装方案
• 【鸿蒙ArkUI实战】基于ImageKit对图片进行处理
• 【鸿蒙ArkUI开发】基于ArkUI的验证码实现
• 【鸿蒙ArkUI实战开发】基于原生能力的深色模式适配
• 【鸿蒙ArkUI实战开发】基于ArkUI的动效能力
• 【鸿蒙ArkUI实战开发】基于ArkUI的透明页面效果
• 持续更新中……

场景描述

透明页面也可以叫做弹窗页面，实际开发场景中经常有一个页面覆盖在另一个页面上的效果，例如：评论弹窗页面、广告弹窗页面等。

场景：评论弹窗页面

功能点：

• 弹窗页面拉起。
• 评论页面状态持久化保存。
• 带参页面拉起。

方案一：使用router+subWindow实现

router路由无法更改页面模式，所以无法直接实现透明页面，需要借助拉起子窗口的方案实现透明页面的效果。思路如下：

1. 获取窗口实例。

2. 拉起一个子窗口并加载对应页面。

3. 设置子窗口背景透明。

4. 定义子窗口的关闭方案。

核心代码

在Ability中获取windowStage实例。

onWindowStageCreate(windowStage: window.WindowStage): void {

// Main window is created, set main page for this ability

windowStage.loadContent('pages/Index', (err) => {

// 这里需要注意为了确保windowStage实例获取成功，我们最好在loadContent回调中回去，能保证页面加载成功的时候一定能讲windowStage实例存到AppStorage对象中

AppStorage.setOrCreate("windowStage", windowStage);

});