HarmonyOs开发应用沉浸式效果

290 阅读1分钟

好看的应用怎么能少了沉浸式效果呢,今天来学习鸿蒙app开发沉浸式效果。 首先可以看下官方文档 developer.huawei.com/consumer/cn…
借用官方图片示例了解导航条和状态栏

image.png
下面是自己得实际操作

image.png 没有设置沉浸式的页面布局
1 应用扩展布局,全屏显示,不隐藏避让区
首先在 EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage)设置窗口全屏,并动态获取导航条和状态栏的高度,然后在布局页面修改布局的高度以及内间距。下面是代码示例 windowClass=windowStage.getMainWindowSync()

image.png
这里使用了AppStorage保存了导航条和状态栏的高度 并使用官方提供的px2vp方法把像素转换到虚拟像素,需要在使用的页面获取高度

image.png

image.png设置沉浸式的页面布局
2 应用扩展布局,全屏显示,隐藏避让区

image.png没有设置全屏显示的效果

image.png设置全屏显示的效果
代码如下 在EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage) windowClass=windowStage.getMainWindowSync()

image.png
针对状态栏和导航条颜色与界面元素颜色不匹配问题,可以通过如下两种方式实现沉浸式效果
1.状态栏和导航条颜色相同场景,可以通过设置窗口的背景色来实现沉浸式效果。窗口背景色可通过setWindowBackgroundColor()进行设置。

image.png

image.png


2.状态栏和导航条颜色不同时,可以使用expandSafeArea属性扩展安全区域属性进行调整。

image.png
修改代码

image.png

image.png
修改导航栏文字颜色 在EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage) 保存windowStage

image.png
在布局页面 获取windowStage 并设置导航栏文字颜色

image.png默认黑色设置成白色

image.png