HarmonyOS 导航栏高度和状态栏高度貌似不对

获取布局避让遮挡的区域。

// 获取状态栏高度 
let statusHeight= AppUtils.windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height; 
// 获取导航栏高度 
let navHeight = AppUtils.windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height; 
preferencesMgr.setNumber(PreferencesConstants.statusHeight, px2vp( statusHeight)); 
preferencesMgr.setNumber(PreferencesConstants.navHeight, px2vp( navHeight));

px2vp( statusHeight) 是38.76

px2vp( navHeight) 是28

是不是不对

导航栏应该是56吧

HarmonyOS

put_get

2024-09-02 11:01:24

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

px2vp( statusHeight) 是38.76

px2vp( navHeight) 是28

是正确的。

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

您可以新建项目，

将EntryAbility的onWindowStageCreate替换为下面代码：

onWindowStageCreate(windowStage: window.WindowStage): 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') }) 
  } 
}

编译查看展示效果。

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

是获取导航条的高度。

导航条请参考下方链接中图1 界面元素示意图

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5

HarmonyOS的导航栏略有不同，是使用Navigation组件，具体您可以查看下方链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5

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

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

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

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

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

下面是navDestination属性相关链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5#属性

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

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

2024-09-02 17:38:04

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 导航栏高度和状态栏高度貌似不对

订阅鸿蒙技术特刊，精选内容抢先看