HarmonyOS鸿蒙Next中导航栏高度和状态栏高度貌似不对

px2vp( statusHeight) 是38.76

px2vp( navHeight) 是28

是正确的。

px2vp( navHeight) 28 对应的是屏幕底部有灰色横条的导航条高度，不是状态栏下面导航栏的高度。

可以新建项目，将EntryAbility的onWindowStageCreate替换为下面代码：

onWindowStageCreate(windowStage: window.Window): void {

  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (err) => {
    windowStage?.getMainWindowSync()?.setWindowLayoutFullScreen(true)

    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');

    let windowClass: window.Window = windowStage.getMainWindowSync()
    let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    let statusHeight = px2vp(avoidArea.topRect.height);

    let avoidArea1 = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
    let navHeight = px2vp(avoidArea1.bottomRect.height);

    console.log('statusHeight:',statusHeight,'navHeight:',navHeight);
    AppStorage.setOrCreate('statusHeight',statusHeight)
    AppStorage.setOrCreate('navHeight',navHeight)
  });
}

将Index.ets代码替换为：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
      }.width('100%').height('100%')
      .backgroundColor('#008000')
    }
    .margin({top:AppStorage.get<number>('statusHeight'), bottom: AppStorage.get<number>('navHeight') })
  }
}

编译查看展示效果。

是获取导航条的高度。

导航条请参考下方链接： 导航条-系统特性-系统特性&能力 - 华为HarmonyOS开发者

鸿蒙的导航栏和iOS的导航栏略有不同，是使用Navigation组件，具体可以查看下方链接： Navigation-导航与切换-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

iOS 的是UINavigationController，导航栏高度NavigationBar是44，跳转新界面pushViewController就可以。

UINavigationController是上面是NavigationBar，下面是viewController的view。

鸿蒙用的是Navigation, 使用NavPathStack配合navDestination属性进行页面路由。

最外面的用Navigation(){}包起来，后面push的页面用navDestination(){}包起来。

Navigation第一个界面是首页，样式和iOS的不太一样，后面push的界面才有类似iOS的NavigationBar，叫titleBar，如果无法满足需求的话，你可以设置NavDestination(){}.hideTitleBar,隐藏标题栏，自定义。

下面是navDestination属性相关链接： NavDestination-导航与切换-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

调试阶段查看组件尺寸，你可以打开模拟器，编译项目，编译完成后点击IDE下方ArkUI Inspector窗口,点击’please select a debuggable process’，选择对应模拟器与包名，点击对应组件，即可在右侧看到对应组件数据，包括宽高。

查看下来，titleBar高度（包含状态栏）为308px（94.76vp）。