OpenHarmony菜单怎么适配屏幕

在 OpenHarmony（HarmonyOS NEXT / 标准 OpenHarmony）里，“菜单”通常分几种场景：系统菜单（ContextMenu / Menu）、自定义弹窗菜单、底部 Tab 菜单、侧边菜单。不同菜单适配屏幕的方式不同，但核心原则都是：响应式布局 + 断点适配 + 安全区域 + 交互适配。

下面按常见情况给你说明。

一、系统菜单（Menu / ContextMenu）适配

1. 使用 ArkUI 的 Menu / bindMenu

系统菜单本身会自动适配屏幕尺寸和位置，你主要注意：

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

✅ 自动适配：

• 弹窗位置
• 屏幕边缘避让
• 横竖屏切换

⚠️ 注意：

• 菜单项不要写死宽度
• 长文本用 ellipsis 或限制最大宽度

二、自定义菜单（弹窗 / 下拉菜单）

1. 使用 CustomDialog 或 Stack + Column

Stack() {
  // 背景
  Column() {
    Text('菜单项1')
    Text('菜单项2')
  }
  .padding(12)
}

屏幕适配方法

✅ 使用百分比 / 弹性布局

.width('80%')
.maxWidth(360)

✅ 监听屏幕尺寸（断点）

import { mediaquery } from '@kit.ArkUI'

let breakPoint = mediaquery.matchMediaSync('(width >= 600)')

• 手机：底部菜单
• 平板：左侧 / 居中浮层

三、底部菜单（TabBar / Sheet）适配

1. 底部 Tab 菜单

Tabs() {
  TabContent() { }
  .tabBar('首页')
}

✅ 适配要点：

• 使用 safeArea() 避开底部手势区
• 图标 + 文字，避免过宽

Tabs()
  .barPosition(BarPosition.End)
  .safeAreaPadding({ bottom: 'env(safe-area-inset-bottom)' })

四、平板 / 折叠屏适配（重点）

1. 断点适配（推荐）

if (screenWidth >= 840) {
  // 侧边菜单
} else {
  // 底部菜单
}

2. 折叠屏展开

• 使用 window 尺寸监听
• 菜单从「底部」切换为「侧边」

五、安全区域适配（必做）

Menu()
  .safeArea({
    top: true,
    bottom: true
  })

或：

.padding({
  bottom: 'env(safe-area-inset-bottom)'
})

六、横竖屏适配

// module.json5
"abilities": [
  {
    "orientation": "unspecified"
  }
]

菜单不要写死高度，用：

.height('auto')

七、常见错误 ❌

❌ 写死宽度

.width(300)

✅ 正确

.width('90%')
.maxWidth(400)

❌ 忽略安全区域
❌ 平板用手机布局

八、总结一句话

OpenHarmony 菜单适配屏幕的核心：
不写死尺寸 + 用断点切换布局 + 用系统菜单或安全区域 + 响应横竖屏和折叠屏

如果你能告诉我：

• 是 系统菜单 / 自定义菜单 / Tab 菜单
• 跑在 手机 / 平板 / 车机 / 折叠屏

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