OpenHarmony菜单如何适配

在 OpenHarmony 中，“菜单适配”通常指在 不同设备形态（手机 / 折叠屏 / 平板 / 智慧屏 / 车机） 以及 不同交互方式（触摸 / 鼠标 / 遥控器） 下，菜单能够正常显示、布局和交互。下面从 设计原则 → 常用菜单组件 → 适配方式 → 示例 四个层面说明。

一、OpenHarmony 菜单适配的核心原则

1. 一次开发，多端部署

   • 使用 ArkUI 声明式开发
   • 通过断点（breakpoint）和媒体查询区分设备

2. 交互方式自适应

   • 触摸：底部菜单 / 弹窗菜单
   • 鼠标：右键菜单 / 悬浮菜单
   • 遥控器：焦点菜单（方向键）

3. 布局自适应

   • 手机：底部或右上角
   • 平板：侧边或顶部
   • 大屏：左侧导航 + 右键菜单

二、OpenHarmony 常见菜单组件

1️⃣ 弹出菜单（Menu）

Button('菜单')
  .bindMenu([
    { value: '复制', action: () => {} },
    { value: '粘贴', action: () => {} }
  ])

✅ 适合：

• 手机
• 鼠标右键
• 轻量操作

2️⃣ 上下文菜单（ContextMenu）

.onClick((e) => {
  e.stopPropagation()
  // 显示自定义菜单
})

✅ 适合：

• 长按
• 右键
• 自定义样式

3️⃣ 侧边菜单（Navigation）

Navigation() {
  // 菜单内容
}

✅ 适合：

• 平板
• 智慧屏
• 多页面结构

三、菜单多端适配方式

✅ 1. 使用断点适配菜单位置

import mediaquery from '@ohos.mediaquery'

let isTablet = false

mediaquery.matchMediaSync('(min-width: 600vp)').on('change', (e) => {
  isTablet = e.matches
})

if (isTablet) {
  // 使用侧边菜单
} else {
  // 使用底部菜单
}

✅ 2. 鼠标 / 触摸差异化

.onMouse((e) => {
  if (e.button === 2) {
    // 右键菜单
  }
})
.onClick(() => {
  // 触摸菜单
})

✅ 3. 遥控器 / 焦点适配（大屏）

Button('菜单')
  .focusable(true)
  .onKeyEvent((e) => {
    if (e.keyCode === 13) {
      // 确认键打开菜单
    }
  })

✅ 4. 折叠屏 / 分屏适配

mediaquery.matchMediaSync('(min-width: 840vp)').on('change', () => {
  // 切换为双栏菜单
})

四、推荐菜单适配方案（实战）

五、示例：手机 / 平板自适应菜单

if (isTablet) {
  Navigation() {
    List() {
     ListItem('首页')
      ListItem('设置')
    }
  }
} else {
  Button('菜单')
    .bindMenu([
      { value: '首页', action: () => {} },
      { value: '设置', action: () => {} }
    ])
}

六、总结一句话

OpenHarmony 菜单适配 = ArkUI + 媒体查询 + 交互区分 + 布局自适应

如果你有具体场景（比如：
✅ 右键菜单怎么做
✅ 智慧屏菜单怎么适配
✅ 折叠屏菜单示例
✅ OpenHarmony 4.x / 5.x 差异）

可以直接告诉我，我可以给你 完整代码示例。