好看的应用怎么能少了沉浸式效果呢,今天来学习鸿蒙app开发沉浸式效果。
首先可以看下官方文档 developer.huawei.com/consumer/cn…
借用官方图片示例了解导航条和状态栏
下面是自己得实际操作
没有设置沉浸式的页面布局
1 应用扩展布局,全屏显示,不隐藏避让区
首先在 EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage)设置窗口全屏,并动态获取导航条和状态栏的高度,然后在布局页面修改布局的高度以及内间距。下面是代码示例
windowClass=windowStage.getMainWindowSync()
这里使用了AppStorage保存了导航条和状态栏的高度 并使用官方提供的px2vp方法把像素转换到虚拟像素,需要在使用的页面获取高度
设置沉浸式的页面布局
2 应用扩展布局,全屏显示,隐藏避让区
没有设置全屏显示的效果
设置全屏显示的效果
代码如下 在EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage) windowClass=windowStage.getMainWindowSync()
针对状态栏和导航条颜色与界面元素颜色不匹配问题,可以通过如下两种方式实现沉浸式效果
1.状态栏和导航条颜色相同场景,可以通过设置窗口的背景色来实现沉浸式效果。窗口背景色可通过setWindowBackgroundColor()进行设置。
2.状态栏和导航条颜色不同时,可以使用expandSafeArea属性扩展安全区域属性进行调整。
修改代码
修改导航栏文字颜色 在EntryAbility.ets里面 onWindowStageCreate(windowStage: window.WindowStage) 保存windowStage
在布局页面 获取windowStage 并设置导航栏文字颜色
默认黑色设置成白色