沉浸式是为了让页面突破安全区域,带来更沉浸式的用户体验,主要使用了 window 的 api ,可以获取全屏以及安全区域高度(核心:getLastWindow)。
//ArkTS
//导入window
import { window } from '@kit.ArkUI'
//context 是应用上下文
class FullScreen{
//开启全屏
async enable() {
//获取全局化的上下文并进行非空断言,使其可以使用promise方法进行异步回调
let ctx = AppStorage.get<Context>('context')!
//获取最上层子窗口并进行异步回调
let win = await window.getLastWindow(ctx)
//开启全屏沉浸模式
win.setWindowLayoutFullScreen(true)
//得到头部导航栏高度
let topRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
//此处得到的导航栏高度是px单位,需转化为vp单位,同时将数据全局化存储
AppStorage.setOrCreate('topHeight',px2vp(topRect.height))
//得到底部导航条高度
let bottomRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect
此处得到的导航栏高度是px单位,需转化为vp单位,同时将数据全局化存储
AppStorage.setOrCreate('bottomHeight',px2vp(bottomRect.height))
}
//关闭全屏
async disable() {
let ctx = AppStorage.get<Context>('context')!
let win = await window.getLastWindow(ctx)
//关闭全屏沉浸模式
win.setWindowLayoutFullScreen(false)
AppStorage.setOrCreate('topHeight',0)
AppStorage.setOrCreate('bottomHeight',0)
}
}
//进行类的实例化
export let fullScreen = new FullScreen()