ArkTS开发-沉浸式状态栏实现

1. 什么是沉浸式状态栏

沉浸式状态栏就是手机屏幕在显示区域的顶部和底部设置的一个安全区域,打开的APP在默认情况下无法影响该区域,从而称之为安全区域.

2. 为什么要开启沉浸式状态栏?

从APP的设计角度来看,这个安全区域非常影响APP的美观,从而影响用户的使用体验,因此大部分APP都会开启这个沉浸式状态栏,并且进行封装从而更好的调用使用.

下面直接上图(左:未开启 右:开启)

2. 如何实现

1. 首先会使用我们鸿蒙的一个内置API [@ohos.window (窗口)](docs.openharmony.cn/pages/v4.1/…)

2. 接下来使用该API中的一个 window.getLastWindow(getContent())方法开启沉浸式模式, 该方法里面的参数getContent()为当前应用上下文信息,直接写入即可.

注意: 在官方文档中有两种该方法,但是一个无返回值, 一个的会返回一个异步Promise的当前应用显示的窗口对象,使用count接收该返回值,后面都会通过该返回值执行后面的代码,来达到这只该窗口沉浸式模式的效果

注意: 上面写的asyac/await是什么? 这个和同步异步相关,可以去查看相关资料,在这里照抄即可

        asyac fullScreen() { 
        const lastWindow = await window.getLastWindow(getContext()) // 获取当前窗口对象
        }

3. 通过该窗口对象使用 setWindowLayoutFullScreen方法来开启/关闭全屏模式(沉浸式模式)

    async onOrOffFullScreen(onOrOff: boolean) {
        const lastWindow = await window.getLastWindow(getContext()) // 获取当前窗口对象
        lastWindow.setWindowLayoutFullScreen(onOrOff)  // 参数为Boolean值,true则开启,false则关闭
    }

3. 直接上代码,效果图

// window 鸿蒙提供好的一个全局对象
import window from '@ohos.window'

// 封装开启/关闭沉浸式模式类
export class Immersion {

  // 获取当前窗口对象,并返出
  async fullScreen() {
    const lastWindow = await window.getLastWindow(getContext())
    return lastWindow
  }

  // 设置全屏模式开启或关闭
  async onOrOffFullScreen(onOrOff: boolean) {
    // 获取当前窗口对象
    const lastWindow = await this.fullScreen()
    // 开启或关闭全屏模式(沉浸式模式)
    lastWindow.setWindowLayoutFullScreen(onOrOff)
  }

}
export const immersion = new Immersion() // 创建该类并导出