HarmonyOS:获取屏幕顶部状态栏、底部导航栏和导航条的高度

获取屏幕顶部状态栏、底部导航栏和导航条的高度
可以使用window的getWindowAvoidArea方法获取

测试结果图

示例TestGetWindowAvoidArea.ets文件代码

typescript 复制代码
import { window } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TestGetWindowAvoidArea {
  @State message: string = '获取屏幕顶部状态栏、底部导航栏和导航条的高度';

  getAvoidAreaHeight() {
    let type1 = window.AvoidAreaType.TYPE_SYSTEM;
    let type2 = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
    window.getLastWindow(getContext(this)).then((data) => {
      // 获取系统默认区域,一般包括状态栏、导航栏
      let avoidArea1 = data.getWindowAvoidArea(type1);
      // 顶部状态栏高度
      let statusBarHeight = avoidArea1.topRect.height;
      // 底部导航栏高度
      let bottomNavHeight = avoidArea1.bottomRect.height;
      // 获取导航条区域
      let avoidArea2 = data.getWindowAvoidArea(type2);
      // 获取到导航条区域的高度
      let indicatorHeight = avoidArea2.bottomRect.height;
      console.info(`屏幕顶部状态栏 statusBarHeight = ${statusBarHeight}`);
      console.info(`底部导航栏 bottomNavHeight = ${bottomNavHeight}`);
      console.info(`导航条的高度 indicatorHeight = ${indicatorHeight}`);
    }).catch((err: BusinessError) => {
      console.error(`获取屏幕顶部状态栏、底部导航栏和导航条的高度 出现异常 Failed to obtain the window. Cause: ${JSON.stringify(err)}`);
    });
  }

  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .id('TestGetWindowAvoidAreaHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.getAvoidAreaHeight()
        })

    }
    .height('100%')
    .width('100%')
  }
}
相关推荐
Math_teacher_fan1 小时前
Flutter 跨平台开发实战:鸿蒙与音乐律动艺术(六)、Lissajous 利萨茹曲线:频率耦合的轨迹艺术
flutter·ui·数学建模·华为·harmonyos·鸿蒙系统
xmdy58663 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day3 溯源查询逻辑+鸿蒙网络请求适配
flutter·开源·harmonyos
maaath4 小时前
【maaath】Flutter 跨平台日历日程应用开发实战
flutter·华为·harmonyos
LeesonWong5 小时前
架构困境与四层结构化设计
harmonyos
梦想不只是梦与想6 小时前
鸿蒙 应用市场更新功能:版本检测与更新提醒
harmonyos·鸿蒙·版本更新
xmdy58666 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day2 首页+核心入口UI开发(鸿蒙多端适配)
flutter·开源·harmonyos
nashane10 小时前
HarmonyOS 6学习:HAR包与HSP包的选择与优化指南
学习·华为·harmonyos·harmonyos 5
全栈若城10 小时前
自定义 TabBar 实战:浮动标签栏与舵式标签栏
harmonyos·harmonyos6·三方库开发
maaath10 小时前
【maaath】Flutter for OpenHarmony 学习答题应用实战开发
学习·flutter·华为·harmonyos
李游Leo10 小时前
别再拼 JSON 了:HarmonyOS UDMF 跨应用数据流转实践
harmonyos