#效果图
##思路+遇到的问题
在aboutToAppear中使用window
模块的 getLastWindow
和 setWindowLayoutFullScreen
两个方法来处理全屏显示
设置沉浸式模式的特点:
在任何一个页面中设置过一次之后,其他页面也会跟着全屏显示
这么处理会出现问题:从其他tab标签进入我的tab标签时,会出现底部tab栏闪动
解决:在进入应用时就开启所有页面的全屏模式
带来新的问题:不需要全屏显示的页面内容会突破安全区域显示,导致内容显示不正常
解决:需要通过获取手机的安全高度来结合 padding来适配顶部内容的正常显示
window.AvoidAreaType.TYPE_SYSTEM 获取导航栏安全高度,但是获取不到底部指示器的高度
window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR -> 获取底部指示器的高度
#设置安全区域文字颜色
window
模块的getLastWindow
和 setWindowSystemBarProperties({statusBarContentColor:颜色})
来设置安全区域文字颜色
- #FFFFFF -> 设置白色 #000000 -> 设置黑色
一旦执行了颜色设置代码,所有页面都会是同一个颜色,如果需要改颜色,需要在指定页面重新设置一次新颜色
#沉浸式模式类封装
封装安全区域工具类windowManager.ets,用来设置沉浸式模式以及设置安全区域的字体颜色
- enableFullScreen - 开启全屏
- disableFullScreen - 关闭全屏
- getAvoidAreaTop获取顶部安全区域高度,并返回该值
- getAvoidAreaBottom获取底部导航条安全区域高度,并返回该值
- settingStatusBarContentColor -设置安全区域文字为白色或者黑色
安全高度获取到的是px单位,需要使用px2vp函数转换成vp单位
##完整版代码如下
import { window } from '@kit.ArkUI'export class windowManager {// 1.开启全屏static async enableFullScreen() {const win = await window.getLastWindow(getContext())win.setWindowLayoutFullScreen(true)}// 关闭全屏static async disableFullScreen() {const win = await window.getLastWindow(getContext())win.setWindowLayoutFullScreen(false)}// 3.获取顶部安全区域高度static async getAvoidAreeTop() {const win = await window.getLastWindow(getContext())const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)const topHeight = px2vp(area.topRect.height)AppStorage.setOrCreate('topHeight', topHeight)return topHeight}// 4.获取底部导航高度static async getAvoidAreeBottom() {const win = await window.getLastWindow(getContext())const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)const bottomHeight = px2vp(area.bottomRect.height)AppStorage.setOrCreate('bottomHeight', bottomHeight)return bottomHeight}// 5.设置安全区域文字的颜色static async settingStatusBarContentColor(color: '#FFFFFF' | '#000000') {const win = await window.getLastWindow(getContext())win.setWindowSystemBarProperties({ statusBarContentColor: color })} }