【鸿蒙应用开发】沉浸式显示（全屏显示）和状态栏文字颜色设置

取个什么名字呢z

已于 2024-09-15 17:55:05 修改

阅读量1.3k

点赞数 26

文章标签：鸿蒙

于 2024-09-14 19:20:24 首次发布

本文链接：https://blog.csdn.net/APAP6/article/details/142261107

版权

4.将方法封装为WindowManage类的静态方法，方便后续调用

总结

一、沉浸式显示是什么？

典型应用全屏窗口UI包括状态栏，应用界面和底部导航条，其中状态栏和导航条在沉浸式布局下称为避让区；避让区之外的区域称为安全区。开发应用沉浸式显示效果主要通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，获得最佳的UI体验。

二、使用步骤

1.获取当前应用内最上层的子窗口

代码如下（示例）：

import { window } from '@kit.ArkUI'

//获取当前的上下文对象
const ctx = getContext()
//使用window对象的getLastWindow方法获取当前应用内最上层的子窗口
const win = await window.getLastWindow(ctx)

2.开启沉浸式显示

代码如下（示例）：

    //开启沉浸式显示，setWindowLayoutFullScreen方法中传入true即是开启，反之则是关闭
    win.setWindowLayoutFullScreen(true)
    //获取安全区域，并将顶部状态栏的高度持久化存储，后续布局可以使用padding或者组件根据高度占位防止页面内容显示到状态栏（底部导航栏高度同理）
    const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    AppStorage.setOrCreate('topHeight', px2vp(top.topRect.height))

3.调整状态栏文字

    //获取当前的上下文对象
    const ctx = getContext()
    //获取应用内最上层的子窗口
    const win = await window.getLastWindow(ctx)
    //调用方法设置状态栏的颜色为白色
    win.setWindowSystemBarProperties({
      statusBarContentColor: '#ffffff'
    })

4.将方法封装为WindowManage类的静态方法，方便后续调用

import { window } from '@kit.ArkUI'

export class WindowManage {
  // 开启沉浸式显示模式
  static async enableFullScreen() {
    const ctx = getContext()
    const win = await window.getLastWindow(ctx)
    win.setWindowLayoutFullScreen(true)
    const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    AppStorage.setOrCreate('topHeight', px2vp(top.topRect.height))
    AppStorage.setOrCreate('bottomHeight', px2vp(top.bottomRect.height))
  }

  // 关闭沉浸式显示模式
  static async disableFullScreen() {
    const ctx = getContext()
    const win = await window.getLastWindow(ctx)
    win.setWindowLayoutFullScreen(false)
    AppStorage.setOrCreate('topHeight', 0)
    AppStorage.setOrCreate('bottomHeight', 0)
  }

  // 设置状态栏文字颜色为白色
  static async setStatusBarLight() {
    const ctx = getContext()
    const win = await window.getLastWindow(ctx)
    win.setWindowSystemBarProperties({
      statusBarContentColor: '#ffffff'
    })
  }

  // 设置状态栏文字颜色为黑色
  static async setStatusBarDark() {
    const ctx = getContext()
    const win = await window.getLastWindow(ctx)
    win.setWindowSystemBarProperties({
      statusBarContentColor: '#000000'
    })
  }
}