《HarmonyOS Next 窗口管理：沉浸式状态栏与系统栏设置》

Albus#0_0

已于 2025-05-21 15:59:16 修改

阅读量735

点赞数 27

分类专栏： # HarmonyOS Next学习日志文章标签： harmonyos 华为

于 2025-05-21 15:59:05 首次发布

本文链接：https://blog.csdn.net/2302_80370282/article/details/148116120

版权

HarmonyOS Next学习日志专栏收录该内容

2 篇文章

订阅专栏

前言

在鸿蒙应用开发中，良好的窗口管理是提升用户体验的关键。本文将结合实战案例，详细介绍如何使用ArkTS实现：

沉浸式状态栏设置
系统栏颜色自定义
状态栏和导航栏高度获取
数据持久化存储

一、核心API介绍

1.1 窗口管理API

鸿蒙系统提供了强大的窗口管理API，主要包括：

@ohos.window：提供窗口管理相关功能
- setWindowLayoutFullScreen：设置沉浸式状态
- getWindowAvoidArea：获取系统栏区域
- setWindowSystemBarProperties：设置系统栏属性

1.2 数据存储API

为了在应用的不同组件中都能方便地访问数据，我们使用：

AppStorage：实现应用内数据共享
PersistentStorage：实现数据持久化

二、WindowManager工具类实现

2.1 完整代码实现

import window from '@ohos.window';

export class WindowManager {
  static fullScreen(windowStage: window.WindowStage) {
    try {
      const win = windowStage.getMainWindowSync();
      // 开启沉浸式模式
      win.setWindowLayoutFullScreen(true);

      // 获取状态栏区域
      let systemArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      // 获取顶部状态栏高度并转换为vp单位
      let statusBarHeight = px2vp(systemArea.topRect.height);

      // 获取导航条区域
      let navigationArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
      // 获取底部导航条高度并转换为vp单位
      let navigationBarHeight = px2vp(navigationArea.bottomRect.height);

      // 将高度值持久化存储
      AppStorage.setOrCreate('statusBarHeight', statusBarHeight);
      AppStorage.setOrCreate('navigationBarHeight', navigationBarHeight);

      // 同时进行持久化存储
      PersistentStorage.persistProp('statusBarHeight', statusBarHeight);
      PersistentStorage.persistProp('navigationBarHeight', navigationBarHeight);
    } catch (error) {
      console.error('设置沉浸式状态失败:', error);
    }
  }

  // 设置系统栏颜色
  static setSystemBarColor(win: window.Window) {
    try {
      win.setWindowSystemBarProperties({
        statusBarContentColor: '#23282C', // 状态栏文字颜色
        navigationBarContentColor: '#23282C', // 导航栏文字颜色
        statusBarColor: '#ff0000', // 状态栏背景色
        navigationBarColor: '#ff0000', // 导航栏背景色
        isStatusBarLightIcon: true, // 状态栏图标是否使用浅色
        isNavigationBarLightIcon: true  // 导航栏图标是否使用浅色
      });
    } catch (error) {
      console.error('设置系统栏颜色失败:', error);
    }
  }
}

三、功能详解

3.1 沉浸式状态栏设置

fullScreen方法实现了以下功能：

开启沉浸式模式
获取状态栏高度
获取导航栏高度
数据持久化存储

3.2 系统栏颜色设置

setSystemBarColor方法支持自定义：

状态栏文字颜色
导航栏文字颜色
状态栏背景色
导航栏背景色
图标颜色模式

四、在EntryAbility中集成

import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { WindowManager } from '../utils/WindowManager';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // 调用WindowManager的fullScreen方法设置沉浸式状态
    WindowManager.fullScreen(windowStage);
    
    // 获取主窗口并设置系统栏颜色
    const win = windowStage.getMainWindowSync();
    WindowManager.setSystemBarColor(win);

    // 加载主页面
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in loading the content.');
    });
  }
}

4.1 默认状态展示

默认状态栏和导航栏
图1：展示了鸿蒙应用中默认的状态栏和导航栏布局，系统预留了顶部状态栏和底部导航栏的空间

五、使用示例

5.1 在页面中获取状态栏高度

@Entry
@Component
struct Index {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @StorageProp('navigationBarHeight') navigationBarHeight: number = 0;

  build() {
    Column() {
      // 顶部状态栏区域
      Text('状态栏在这里')
        .fontSize(20)

      // 中间内容区域
      Column() {
        Text(`状态栏高度：${this.statusBarHeight}vp`)
          .fontSize(20)
          .margin(10)

        Text(`导航栏高度：${this.navigationBarHeight}vp`)
          .fontSize(20)
          .margin(10)
      }
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)

      // 底部导航栏区域
      Text('导航栏在这里')
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}