概念:沉浸式模式是指一个窗口应用程序能够将用户的注意力完全吸引到其界面上,并使用户对其他应用程序和操作系统的界面感知降到最低的能力。
在沉浸式模式里面,需要设置:
1、设置沉浸式模式
// 获取到当前的窗口
window.getLastWindow(getContext()).then((windowStage: window.Window) => {
// 开启全屏 -> 开启沉浸式模式
windowStage.setWindowLayoutFullScreen(true) // true:开启全屏,false:关闭全屏
// 获取安全区域的高度
const area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
const h = area.topRect.height //获取到了当前设备窗口的安全区域的高度
// 将h这个值设置给AppStoage即可
AppStorage.setOrCreate('topHeight', h)
})
}
// 关闭全屏 -- 项目中不用,保留即可
static disableFullScreen() {
// 获取到当前的窗口
window.getLastWindow(getContext()).then((windowStage: window.Window) => {
// 开启全屏 -> 开启沉浸式模式
windowStage.setWindowLayoutFullScreen(false) // true:开启全屏,false:关闭全屏
// 将h这个值设置给AppStoage即可
AppStorage.setOrCreate('topHeight', 0)
})
}
2、设置安全区域的字体颜色
// 状态栏文字颜色设置为白色
static settingStatusBarLight() {
window.getLastWindow(getContext()).then((windowStage:window.Window)=>{
// 设置颜色
windowStage.setWindowSystemBarProperties({statusBarContentColor:'#FFFFFF'})
})
}
// 状态栏文字颜色设置为黑色
static settingStatusBarDark() {
window.getLastWindow(getContext()).then((windowStage:window.Window)=>{
// 设置颜色
windowStage.setWindowSystemBarProperties({statusBarContentColor:'#000000'})
})
}
每个App里面的页面都需要用到沉浸式模式,所以,为了全局的考虑,我们可以把实现沉浸式模式的代码进行封装,封装好了之后,哪里需要就直接调用即可。