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%')
  }
}
相关推荐
想你依然心痛4 分钟前
HarmonyOS 6(API 23)实战:基于 Face AR & Body AR 的“空间交互设计工作台“——PC端手势驱动3D建模系统
ar·交互·harmonyos·悬浮导航·沉浸光感
liulian091627 分钟前
Flutter 网络状态与内容分享库:connectivity_plus 与 share_plus 的 OpenHarmony 适配指南总结
flutter·华为·学习方法·harmonyos
IntMainJhy29 分钟前
Flutter 引导页 Onboarding 第三方库 的鸿蒙化适配与实战指南
harmonyos
IntMainJhy1 小时前
Flutter WebView 第三方库 内嵌 H5 页面的鸿蒙化适配与实战指南
flutter·华为·harmonyos
南村群童欺我老无力.1 小时前
鸿蒙pc aboutToAppear与onPageShow的执行时机差异
华为·harmonyos
liulian09161 小时前
Flutter for OpenHarmony 用户登录与身份认证功能实现指南
flutter·华为·学习方法·harmonyos
jiejiejiejie_1 小时前
Flutter for OpenHarmony 登录认证小指南:用 Flutter 给鸿蒙 App 安上 “安全小锁”✨
安全·flutter·华为·harmonyos
前端不太难1 小时前
鸿蒙游戏:设备不再是边界
游戏·状态模式·harmonyos
liulian09161 小时前
Flutter Hero 共享元素转场与 animated_text_kit 文字动画库的 OpenHarmony 适配总结
flutter·华为·学习方法·harmonyos
liulian09161 小时前
Flutter for OpenHarmony 跨平台技术实战:lottie 动画库与 flutter_view 页面转场库的鸿蒙化适配指南
flutter·华为·学习方法·harmonyos