鸿蒙应用开发--沉浸式显示（全屏显示）沉浸式显示也可以叫做全屏显示，其实就是将页面突破安全区域，显示到整个屏幕。本文介绍

沉浸式显示也可以叫做全屏显示，其实就是将页面突破安全区域，显示到整个屏幕。如下图：

1. 如何开启沉浸式显示

在组件的aboutToAppear中使用window模块(api)的 getLastWindow 方法获取到当前窗口
利用当前窗口的setWindowLayoutFullScreen方法设置全屏

aboutToAppear(): void {
  // 1. 利用了系统的window 这个api的getLastWindow方法获取到了当前的窗口
  window.getLastWindow(getContext()).then(win=>{
    // 2. 利用当前窗口的setWindowLayoutFullScreen方法设置全屏: true:设置全屏  false：取消全屏
    win.setWindowLayoutFullScreen(true)  // 开启了当前页面的沉浸式模式（开启全屏模式）
  })
}

//由于getLastWindow返回的是一个Promise对象，所以可以将上述代码优化一下
async aboutToAppear() {
  const win = await window.getLastWindow(getContext())
  win.setWindowLayoutFullScreen(true)
}

Tips：

在任何一个页面中开启沉浸式模式后，其他页面也会跟着全屏显示
在开发中，一般有一个页面需要沉浸式显示，就需要在整个项目的入口开启

2. 解决开启沉浸式模式后页面内容进入顶部状态栏或底部导航栏问题

2.1 顶部状态栏

这里获取到的高度单位是像素px，我们需要使用px2vp()函数将其转换成鸿蒙的vp单位才能够正常使用。底部导航栏同理。

获取状态栏高度

const win = await window.getLastWindow(getContext())
const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
const topHeight = px2vp(area.topRect.height)

将获取的高度应用到所需组件的上内边距 padding({ top: this.topHeight })

2.2 底部导航栏

获取导航栏高度

const win = await window.getLastWindow(getContext())
const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
const bottomHeight = px2vp(area.bottomRect.height)

将获取的高度应用到所需组件的下内边距 padding({ top: this.bottomHeight })

const win = await window.getLastWindow(getContext())
const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
const bottomHeight = px2vp(area.bottomRect.height)

3. 设置安全区域（顶部状态栏）文字颜色

const win = await window.getLastWindow(getContext())
win.setWindowSystemBarProperties({ statusContentBarColor: 颜色 })

Tips：

一旦执行了颜色设置代码，所有页面都会是同一个颜色，如果需要改颜色，需要在指定页面重新设置一次新颜色
颜色设置一般用完整的大写十六进制字符串填写，否则可能会无法显示

4. 沉浸式显示模式类封装

在开发中，如果用到沉浸式模式，我们可以将重复的代码封装成一个工具类，使用时直接调用，简化代码。下面是一个样例：

import { window } from '@kit.ArkUI'

export class windowManager {
  //1. 开启全屏
  static async enableFullScreen() {
    const win = await window.getLastWindow(getContext())
    win.setWindowLayoutFullScreen(true)
  }

  //2. 关闭全屏
  static async disableFullScreen() {
    const win = await window.getLastWindow(getContext())
    win.setWindowLayoutFullScreen(false)
  }

  //3. 获取顶部安全区域高度
  static async getAvoidAreaTop() {
    const win = await window.getLastWindow(getContext())
    const area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    const topHeight = px2vp(area.topRect.height)
    //通过AppStorage存储，有页面需要时直接用@StorageProp调用
    AppStorage.setOrCreate('topHeight', topHeight)
    return topHeight
  }

  //4. 获取底部导航条高度
  static async getAvoidAreaBottom() {
    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 statusBarColorWB(color: '#FFFFFF' | '#000000') {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({ statusBarContentColor: color })
  }
}

调用

async aboutToAppear() {
  //开启全屏
  windowManager.enableFullScreen()
  //只需要调用一次
  windowManager.getAvoidAreaTop()
  this.bottomHeight=await windowManager.getAvoidAreaBottom()
  //每个页面都需要根据需求设置
  windowManager.statusBarColorWB('#FFFFFF')
}
//获取顶部状态栏高度
@StorageProp("topHeight") topHeight: number = 0

总结

沉浸式显示模式的关键步骤其实就是获取到一个窗口对象，然后通过窗口对象的方法来获取想要的属性值。除了在页面中获取窗口对象，我们也可以在EntryAbility里的onWindowStageCreate函数中使用windowStage.getMainWindowSync()获取到窗口对象，直接在应用创建时就开启沉浸式（如下图）。

沉浸式模式开启后，整个应用的所有页面都会开启，可能会导致某些页面内容显示错位，需要通过获取手机的状态栏和导航栏的高度来结合padding来适配页面内容的正常显示。

如有错误，欢迎指正。