鸿蒙开启沉浸式导航

185 阅读1分钟

介绍

沉浸式导航让设备显示全屏,使得app的体验更加好。

未使用前是这样的

image.png

image.png

使用沉浸式导航需要使用window包

使用window.WindowStage模块设置全屏

const win = windowStage.getMainWindowSync()
win.setWindowLayoutFullScreen(true)

获取顶部安全高度,并保存到全局变量


const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
AppStorage.setOrCreate<number>(SafeHeight,px2vp(top.height))

获取底部安全高度,并保存到全局变量

const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).bottomRect
AppStorage.setOrCreate<number>(SafeBottom,px2vp(bottom.height))a

在使用页面获取安全高度

@StorageProp(SafeTop) top:number=0
@StorageProp(SafeBottom) bottom:number=0

在最大的容器上加入内边距

.padding({top:this.top,bottom:this.bottom})

image.png

image.png