鸿蒙开发之获取状态栏导航栏高度

原创已于 2025-01-08 09:28:54 修改 · 664 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#开发语言 #鸿蒙 #harmonyos

于 2025-01-08 09:22:31 首次发布

前言

为了兼容全面屏设计，我们的布局要从导航栏+状态栏下开始布局，就需要动态的设置页面的布局了。

我这边的思路是给顶部放一个透明的text，设置text的高度来控制布局的起始点。

开发过程

先定义一个状态变量，来动态存储导航栏+状态栏高度

//顶部导航栏高度
@Local mAvoidAreaHeight?: number = 0

在aboutToAppear中动态获取导航栏高度

  aboutToAppear(): void {
    TopSafeAreaTool.getWindowAvoidArea(this.context).then((area) => {
      this.mAvoidAreaHeight = area?.topRect.height
    })
  }

其中TopSafeAreaTool是一个工具类

import { common } from "@kit.AbilityKit";
import { window } from "@kit.ArkUI";


export class TopSafeAreaTool {

  /**
   * 获取系统状态栏，导航栏高度
   * @param context
   * @returns
   */
  static async getWindowAvoidArea(context: common.UIAbilityContext): Promise<window.AvoidArea | null> {
    try {
      const mainWindow = await window.getLastWindow(context);
      const avoidAreaType = window.AvoidAreaType.TYPE_SYSTEM;
      const avoidArea = mainWindow.getWindowAvoidArea(avoidAreaType);
      return avoidArea
    } catch (e) {
      console.log('getWindowAvoidArea fail');
      return null
    }
  }

}

在页面布局时

 build() {
    Column() {
      //顶部导航栏区域控制
      Text('')
        .backgroundColor(this.topStatusBackground) //动态设置顶部颜色
        .width('100%')
        .height(`${this.mAvoidAreaHeight}px`)
       
    //其他布局

    }
    
}

至此，兼容全面屏结束。