HarmonyOS鸿蒙Next中系统小白条高度是多少？

HarmonyOS鸿蒙Next中系统小白条高度是多少？ 如果切换到三键导航系统，小白条和三键导航的高度一样吗？

8 回复

通过窗口的 getWindowAvoidArea() 方法，传入避让区域类型 TYPE_NAVIGATION_INDICATOR（底部导航区域），从返回的避让区域信息中读取 bottomRect.height，即为底部导航条的高度。

需要注意的关键点：

  • 获取到的单位为 px，通常需要通过 px2vp() 转换为 vp 单位
  • 如果应用设置了全屏布局（setWindowLayoutFullScreen），需要通过监听 avoidAreaChange 事件来动态获取，避免切换前后避让区域高度未更新
  • 获取底部导航区域高度时，必须使用 TYPE_NAVIGATION_INDICATOR 类型，而非 TYPE_SYSTEM（后者获取的底部高度始终为 0）

如何获取底部手势横条的高度-方舟UI框架（ArkUI）-UI框架-应用框架开发-开发 - 华为HarmonyOS开发者

// 
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct GetBottomNavBarHeight {
  context = this.getUIContext();

  build() {
    Column() {
      Button('获取底部导航条高度')
        .onClick(() => {
          // 设置避让区域类型为底部导航条
          let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
          window.getLastWindow(this.context.getHostContext()).then((data) => {
            let avoidArea = data.getWindowAvoidArea(type);
            // 获取底部导航条区域的高度（单位：px）
            let bottomRectHeight = avoidArea.bottomRect.height;
            // 转换为 vp 单位
            let bottomRectHeightVp = this.context.px2vp(bottomRectHeight);
            console.info(`底部导航条高度(px): ${bottomRectHeight}, 转vp: ${bottomRectHeightVp}`);
          }).catch((err: BusinessError) => {
            console.error(`获取窗口失败: ${JSON.stringify(err)}`);
          });
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中系统小白条高度是多少？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学习了

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html，

👍

一样的，

系统“小白条”没有固定高度，不能按某个 vp 写死。它属于底部导航指示区，建议动态取值：

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    const windowClass: window.Window = windowStage.getMainWindowSync();

    const navArea = windowClass.getWindowAvoidArea(
      window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
    );

    const navigationHeight = navArea.bottomRect.height;
  }
}

如果在页面组件里想拿，也可以通过 UIAbilityContext 取 windowStage：

private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
private windowClass = this.context.windowStage.getMainWindowSync();

如果切到三键导航，高度不一定和小白条一样。三键导航是完整导航栏区域，手势导航的小白条只是导航指示区，两者在不同设备、系统设置、横竖屏、沉浸式状态下都可能不同。

HarmonyOS 鸿蒙Next的系统小白条（导航条）高度为32vp（虚拟像素）。在应用开发中，可通过 windowStage.getMainWindowSync().getAvoidArea() 获取避免区域实际值适配。

HarmonyOS Next 中，系统手势导航小白条（导航条）的默认高度为 24vp。
若切换为三键导航（虚拟按键导航），其高度与小白条不一致，三键导航栏的默认高度同样为 24vp，但实际区域高度可能因机型适配略有差异，两者在界面占据的空间高度相同（均为 24vp）。

回到顶部