鸿蒙开发，开启沉浸式模式，控制状态栏属性(内容颜色)

沉浸式工具

前置知识：

• window.getLastWindow 获取当前窗口对象
• getWindowAvoidArea 使用窗口对象获取某一个区域的尺寸

将来很多地方需使用 context ，所以在EntryAbility文件里实现全局共享 context 对象

当应用创建时，将 context 对象存到全局

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    logger.info('Ability onCreate')
    AppStorage.setOrCreate('context',this.context)
  }

封装

开启沉浸式

一、获取在EntryAbility里全局定义的context 对象。

const ctx = AppStorage.get<Context>('context')

二、获取窗口最上层显示的子窗口，也就是返回当前应用内最后显示的窗口对象，若无应用子窗口，则返回应用主窗口。

 // 根据 window 模块创建一个对象
const win = await window.getLastWindow(ctx)
// 对象的方法 setWindowLayoutFullScreen(true) 是开启沉浸式模式
win.setWindowLayoutFullScreen(true)

三、获取顶部状态栏安全区高度，获取到的高度单位为px，需要转成vp，并全局定义。

// 顶部状态栏区域
const topRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
// 将顶部状态栏的高度用 AppStorage 全局定义
AppStorage.setOrCreate<number>('topRectHeight', px2vp(topRect.height))

四、同理，获取底部导航条安全区高度。

// 低部导航条区域
const bottomRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect
// 将低部导航条的高度用 AppStorage 全局定义
AppStorage.setOrCreate<number>('bottomRectHeight', px2vp(bottomRect.height))

开启沉浸式方法完整代码

class FullScreen {
  async enable() {
    const ctx = AppStorage.get<Context>('context')
    // get 返回值的类型为 Context | undefined 联合类型，有可能是undefined，所以加一个if判断
    if (ctx) {
      // 根据 window 模块创建一个对象
      const win = await window.getLastWindow(ctx)
      // 对象的方法 setWindowLayoutFullScreen(true) 是开启沉浸式模式
      win.setWindowLayoutFullScreen(true)
      // 顶部状态栏区域
      const topRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
      // 将顶部状态栏的高度用 AppStorage 全局定义
      AppStorage.setOrCreate<number>('topRectHeight', px2vp(topRect.height))
      // 低部导航条区域
      const bottomRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect
      // 将低部导航条的高度用 AppStorage 全局定义
      AppStorage.setOrCreate<number>('bottomRectHeight', px2vp(bottomRect.height))
    }

  }
}

关闭沉浸式

关闭沉浸式模式只需要调用一下setWindowLayoutFullScreen()方法，并将存储的安全区清空即可

    const ctx = AppStorage.get<Context>('context')
    if (ctx) {
      const win = await window.getLastWindow(ctx)
      win.setWindowLayoutFullScreen(false)
      // 将顶部状态栏的高度用 AppStorage 全局定义  当沉浸式关闭时 将高度置为0
      AppStorage.setOrCreate<number>('topRectHeight', 0)
      // 将低部导航条的高度用 AppStorage 全局定义  当沉浸式关闭时 将高度置为0
      AppStorage.setOrCreate<number>('bottomRectHeight', 0)
    }

沉浸式工具完整代码

import { window } from '@kit.ArkUI'

class FullScreen {
  async enable() {
    const ctx = AppStorage.get<Context>('context')
    if (ctx) {
      // 根据 window 模块创建一个对象
      const win = await window.getLastWindow(ctx)
      // 对象的方法 setWindowLayoutFullScreen(true) 是开启沉浸式模式
      win.setWindowLayoutFullScreen(true)
      // 顶部状态栏区域
      const topRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
      // 将顶部状态栏的高度用 AppStorage 全局定义
      AppStorage.setOrCreate<number>('topRectHeight', px2vp(topRect.height))
      // 低部导航条区域
      const bottomRect = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect
      // 将低部导航条的高度用 AppStorage 全局定义
      AppStorage.setOrCreate<number>('bottomRectHeight', px2vp(bottomRect.height))
    }

  }
  
  async disable() {
    const ctx = AppStorage.get<Context>('context')
    if (ctx) {
      const win = await window.getLastWindow(ctx)
      win.setWindowLayoutFullScreen(false)
      // 将顶部状态栏的高度用 AppStorage 全局定义  当沉浸式关闭时 将高度置为0
      AppStorage.setOrCreate<number>('topRectHeight', 0)
      // 将低部导航条的高度用 AppStorage 全局定义  当沉浸式关闭时 将高度置为0
      AppStorage.setOrCreate<number>('bottomRectHeight', 0)
    }
  }
}


export const fullscreen = new FullScreen()

状态栏工具

前置知识：

• setWindowSystemBarProperties 设置状态颜色

setWindowSystemBarProperties方法可设置主窗口三键导航栏、状态栏的属性，参数类型为 SystemBarProperties

创建方法

  async setBar(config: window.SystemBarProperties){
    const ctx = AppStorage.get<Context>('context')
    if(ctx){
      const win = await window.getLastWindow(ctx)
      await win.setWindowSystemBarProperties(config)
    }
  }

根据此方法可设置状态栏的颜色

  //  深色
  setDarkBar(){
    this.setBar({statusBarContentColor: '#000000'})
  }

  // 浅色
  setLightBar(){
    this.setBar({statusBarContentColor:'#FFFFFF'})
  }

状态栏工具完整代码

class StatusBar {
  //  深色
  setDarkBar(){
    this.setBar({statusBarContentColor: '#000000'})
  }

  // 浅色
  setLightBar(){
    this.setBar({statusBarContentColor:'#FFFFFF'})
  }
    
  // 设置属性
  async setBar(config: window.SystemBarProperties){
    const ctx = AppStorage.get<Context>('context')
    if(ctx){
      const win = await window.getLastWindow(ctx)
      await win.setWindowSystemBarProperties(config)
    }
  }

}

export const statusbar = new StatusBar()