鸿蒙Next ArkTS中如何获取工具栏高度

在鸿蒙Next开发中，使用ArkTS编写界面时遇到工具栏高度获取的问题。尝试通过getToolbarHeight()等方法获取，但始终返回0或undefined。请问正确的API调用方式是什么？是否需要先完成工具栏渲染才能获取？示例代码中是如何处理的？

2 回复

鸿蒙Next的ArkTS中，获取工具栏高度？试试getWindowAvoidArea！它能避开刘海、状态栏等区域，返回安全区域的边界值。记得在onWindowStageCreate里调用，别让工具栏“躲猫猫”哦～

更多关于鸿蒙Next ArkTS中如何获取工具栏高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkUI（特别是ArkTS）中，获取工具栏（通常指应用窗口顶部的状态栏和导航栏）高度可以通过window模块中的getWindowAvoidArea方法实现。该方法返回窗口的安全区域，其中包含状态栏、导航栏等系统UI占用的区域。

以下是具体步骤和示例代码：

  1. 导入模块：使用@ohos.window模块。
  2. 获取窗口实例：通过window.getLastWindow获取当前窗口。
  3. 调用方法：使用getWindowAvoidArea获取避免区域，类型为AvoidArea。
  4. 提取高度：从返回的AvoidArea对象中获取top或bottom区域的高度（状态栏通常在顶部，导航栏在底部）。

示例代码：

import window from '@ohos.window';

// 获取窗口实例（假设在UIAbility的onWindowStageCreate中调用）
let windowClass: window.Window | null = null;
window.getLastWindow(this.context, (err, data) => {
  if (err) {
    console.error('Failed to get window');
    return;
  }
  windowClass = data;
  
  // 获取避免区域
  let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
  let statusBarHeight = avoidArea.topRect.height;  // 状态栏高度
  let navigationBarHeight = avoidArea.bottomRect.height; // 导航栏高度
  
  console.log(`Status bar height: ${statusBarHeight}`);
  console.log(`Navigation bar height: ${navigationBarHeight}`);
});

注意事项：

  • 该方法需要在UIAbility的窗口创建后调用（例如在onWindowStageCreate生命周期中）。
  • 返回的高度单位为像素（px），在UI布局中可直接使用。
  • 如果应用全屏运行（隐藏系统UI），则高度可能为0。

通过以上代码，即可动态获取工具栏相关高度，用于调整界面布局以避免遮挡。

回到顶部