页面要突破手机安全区域来全屏显示（沉浸式模式显示），其他页面不需要,如何设置安全区域文字颜色

本文链接：https://blog.csdn.net/H1453571548/article/details/142025725

#效果图

##思路+遇到的问题

在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 })
  }
}