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%')
  }
}
相关推荐
ZZZMMM.zip9 分钟前
竞品分析框架-基于鸿蒙的AI竞品分析应用开发实践
人工智能·华为·harmonyos·鸿蒙系统
ldsweet2 小时前
《HarmonyOS技术精讲-Basic Services Kit》账号管理:应用内账号创建与管理
华为·harmonyos
shaodong11233 小时前
HarmonyOS新特性-沉浸光感在叠叠消小游戏中的落地实践
harmonyos·鸿蒙
xd1855785553 小时前
歌词创作工坊-基于鸿蒙的AI歌词创作应用开发实践
人工智能·华为·harmonyos·鸿蒙
子非鱼94274 小时前
07-Flutter 鸿蒙实战 07:故事集列表与缓存设计
学习·flutter·缓存·华为·harmonyos
程序员黑豆4 小时前
从零开始:创建第一个鸿蒙应用程序
前端·harmonyos
千逐686 小时前
HarmonyOS 实战 | 弹窗/提示框怎么做——Alert、Dialog、Toast 详解
华为·harmonyos·鸿蒙
子非鱼94276 小时前
08-Flutter 鸿蒙实战 08:故事详情页,编辑、删除、重新生成与底部弹层
flutter·华为·harmonyos
子非鱼94277 小时前
06-Flutter 鸿蒙实战 06:上传后处理流程,照片识别、故事生成和状态刷新
学习·flutter·华为·harmonyos
Helen_cai7 小时前
HarmonyOS ArkTS 实战:实现一个校园课程表与考勤管理应用
华为·harmonyos