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%')
  }
}
相关推荐
键盘鼓手苏苏6 分钟前
Flutter for OpenHarmony:cider 自动化版本管理与变更日志生成器(发布流程标准化的瑞士军刀) 深度解析与鸿蒙适配指南
运维·开发语言·flutter·华为·rust·自动化·harmonyos
无巧不成书021811 分钟前
【RN鸿蒙教学|第11课时】应用打包与部署实战:完成从开发到落地的全闭环
react native·华为·开源·交互·harmonyos
前端不太难18 分钟前
鸿蒙如何重新定义“超级 App”
华为·状态模式·harmonyos
星空222326 分钟前
【HarmonyOS】HarmonyOS React Native实战:手势交互配置优化
react native·交互·harmonyos
松叶似针26 分钟前
Flutter三方库适配OpenHarmony【secure_application】— onMethodCall 方法分发实现
flutter·harmonyos
阿林来了27 分钟前
Flutter三方库适配OpenHarmony【flutter_speech】— 语音识别引擎创建
人工智能·flutter·语音识别·harmonyos
键盘鼓手苏苏29 分钟前
Flutter for OpenHarmony:dart_ping 网络诊断的瑞士军刀(支持 ICMP Ping) 深度解析与鸿蒙适配指南
开发语言·网络·flutter·华为·rust·harmonyos
阿林来了43 分钟前
Flutter三方库适配OpenHarmony【flutter_speech】— 语音识别启动与参数配置
人工智能·flutter·语音识别·harmonyos
空空潍6 小时前
鸿蒙HarmonyOS入门-音乐app开发项目(含源码)
华为·harmonyos
松叶似针11 小时前
Flutter三方库适配OpenHarmony【secure_application】— OpenHarmony 插件工程搭建
flutter·harmonyos