OpenHarmony菜单隐藏功能怎么用

OpenHarmony菜单隐藏功能的用法

一 使用场景与总览

• 在应用内常见的“菜单”包括：页面右上角菜单（menus）、工具栏（toolBar）、标题栏（titleBar）、返回键（backButton）以及分栏时的导航栏（navBar）。这些元素均可通过组件的属性进行显示或隐藏，适配不同页面与交互状态。
• 若你的目标是隐藏系统层面的状态栏/导航栏（设备屏幕顶部与底部系统条），需通过Window接口单独控制，不属于组件菜单范畴。

二 在 ArkUI 中隐藏页面菜单与标题栏

• 使用组件：Navigation（API 8+）。常用属性如下（置为 true 即隐藏）：
  • hideTitleBar：隐藏标题栏
  • hideToolBar：隐藏工具栏
  • hideBackButton：隐藏返回键（仅在 titleMode=NavigationTitleMode.Mini 时生效）
  • menus：右上角菜单；当以数组形式提供时，竖屏最多显示3个图标，横屏最多5个，超出将自动归入“更多”
  • 分栏相关（仅在 mode=NavigationMode.Split 时生效）：hideNavBar、navBarWidth、navBarPosition
• 示例代码（ArkTS）：

  @Entry
  @Component
  struct HomePage {
    build() {
      Navigation({
        title: '首页',
        menus: [
          { value: '搜索', icon: $r('app.media.ic_search'), action: () => {} },
          { value: '设置', icon: $r('app.media.ic_settings'), action: () => {} }
        ],
        toolBar: { items: [{ value: '编辑', icon: $r('app.media.ic_edit') }] },
        titleMode: NavigationTitleMode.Mini,
        mode: NavigationMode.Split
      }) {
        // 页面内容
        Column() { Text('内容区域').fontSize(20) }.padding(12)
      }
      .hideTitleBar(true)     // 隐藏标题栏
      .hideToolBar(true)      // 隐藏工具栏
      .hideBackButton(true)   // 隐藏返回键（Mini 模式）
      .hideNavBar(false)      // 分栏时是否隐藏导航栏
    }
  }
  

  上述属性与行为适用于 API 8+，其中 hideNavBar / navBarWidth / navBarPosition 自 API 9+ 提供。

三 隐藏系统状态栏与导航栏

• 适用场景：全屏播放、沉浸式阅读、自定义系统条样式等。
• 思路：在 Ability/Page 中获取主 Window，调用 setWindowSystemBarEnable 控制显示/隐藏。
• 示例代码（ArkTS）：

  import window from '@ohos.window';
  import { BusinessError } from '@ohos.base';
  
  // 建议在 onWindowStageCreate 中获取并缓存主窗口
  windowStage.getMainWindow().then((win: window.Window) => {
    AppStorage.setOrCreate('mainWindow', win);
  }).catch((err: BusinessError) => {
    console.error('获取主窗口失败：' + JSON.stringify(err));
  });
  
  function setSystemBarVisible(names: Array<'status' | 'navigation'>) {
    const win = AppStorage.get('mainWindow') as window.Window;
    win.setWindowSystemBarEnable(names, (err: BusinessError) => {
      if (err.code) {
        console.error('设置系统栏可见性失败：' + JSON.stringify(err));
        return;
      }
      console.info('系统栏显示/隐藏设置成功');
    });
  }
  
  // 调用示例：隐藏状态栏与导航栏
  setSystemBarVisible([]); // 传空数组即隐藏两者
  // 仅隐藏导航栏：setSystemBarVisible(['status'])
  // 仅隐藏状态栏：setSystemBarVisible(['navigation'])
  

  说明：该方法仅影响系统级状态栏/导航栏，不影响页面内 Navigation 的菜单与标题栏。

四 常见问题与限制

• menus 超过上限会自动折叠：竖屏最多显示3个图标，横屏最多5个，超出进入“更多”，无法用属性直接“隐藏单个图标”；如需隐藏，请动态控制传入的 menus 数组内容。
• hideBackButton 生效条件：仅在 titleMode=NavigationTitleMode.Mini 时有效；其他模式不生效。
• 分栏相关属性生效条件：hideNavBar / navBarWidth / navBarPosition 仅在 NavigationMode.Split 时有效。
• 系统栏与页面菜单互不干扰：使用 setWindowSystemBarEnable 隐藏的是系统状态栏/导航栏；页面内的 titleBar / toolBar / menus 仍按 Navigation 属性控制。