鸿蒙Next navigation工具栏高度如何设置

在鸿蒙Next开发中，如何自定义Navigation工具栏的高度？我尝试通过修改布局参数和样式属性，但效果不理想。官方文档中提到的preferredHeight似乎没有生效，是否有其他正确的配置方式或需要特别注意的API？希望能提供具体代码示例或解决方案。

2 回复

鸿蒙Next的导航工具栏高度？简单！在NavigationContainer里用navigationBarOptions设置height属性就行，比如height: 56vp。记住单位用vp，适配不同屏幕！搞定收工~ 🚀

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


在鸿蒙Next（HarmonyOS NEXT）中，导航工具栏（Navigation）的高度可以通过以下方式设置：

1. 使用系统默认高度

鸿蒙系统通常会自动适配导航栏高度，无需手动设置。可以通过以下代码获取系统默认高度：

import window from '@ohos.window';

// 获取窗口实例并读取导航栏高度
let windowClass = await window.getLastWindow(this.context);
let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
let navHeight = avoidArea.height; // 导航栏高度（像素）

2. 自定义高度

若需自定义高度，建议通过页面布局的 padding 或 margin 属性调整内容区域：

// 示例：在页面顶部预留导航栏空间
struct MyPage {
  build() {
    Column() {
      // 页面内容
      Text('页面内容')
        .fontSize(20)
    }
    .padding({ top: 60 }) // 根据需求调整顶部内边距（单位：vp）
    .width('100%')
    .height('100%')
  }
}

3. 全屏隐藏导航栏

若需隐藏导航栏实现全屏效果：

import window from '@ohos.window';

// 在页面加载时调用
async function hideNavigationBar() {
  let windowClass = await window.getLastWindow(this.context);
  windowClass.setWindowSystemBarEnable(['status']); // 仅保留状态栏，隐藏导航栏
}

注意事项：

  • 单位建议使用 vp（虚拟像素）以适配不同屏幕密度
  • 导航栏高度因设备而异，建议优先采用系统默认值
  • 全屏模式需谨慎使用，可能影响用户操作习惯

通过以上方法即可灵活控制导航栏的显示与布局空间。

回到顶部