OpenHarmony菜单怎么适配横屏

在 OpenHarmony 中，“菜单适配横屏”通常指 应用界面（包括菜单、弹窗、设置项等）在设备横屏状态下能正常显示和使用。下面按常见场景说明怎么做。

一、先确认应用是否支持横屏

1. 配置支持横屏（Stage 模型）

在 module.json5 中设置：

"abilities": [
  {
    "name": "EntryAbility",
    "orientation": "unspecified" // 或 "landscape"
  }
]

常用取值：

• portrait：仅竖屏
• landscape：仅横屏
• unspecified：跟随系统（推荐）
• sensor：根据传感器自动旋转

若菜单在横屏不显示，第一步先确认这里是否限制了竖屏。

二、ArkUI 页面布局适配横屏

1. 使用响应式布局

避免写死宽高，使用：

• Flex
• Grid
• Row / Column
• layoutWeight

示例：

Row() {
  Menu()
    .layoutWeight(1)
  Content()
    .layoutWeight(2)
}

2. 根据屏幕方向调整布局

import display from '@ohos.display'

@State isLandscape: boolean = false

aboutToAppear() {
  const displayInfo = display.getDefaultDisplaySync()
  this.isLandscape = displayInfo.width > displayInfo.height
}

然后：

if (this.isLandscape) {
  Row() { /* 横屏菜单 */ }
} else {
  Column() { /* 竖屏菜单 */ }
}

三、系统菜单 / 弹窗适配

1. 使用 Menu / BindMenu

Button('菜单')
  .bindMenu([
    { value: '选项1', action: () => {} },
    { value: '选项2', action: () => {} }
  ])

系统会自动适配横竖屏，无需额外处理。

2. 自定义弹窗（CustomDialog）

横屏时注意：

• 宽度用百分比
• 避免固定 width: 300vp

@CustomDialog
struct MyMenu {
  controller: CustomDialogController

  build() {
    Column() {
      Text('菜单')
      Button('关闭').onClick(() => this.controller.close())
    }
    .width('60%')
  }
}

四、平板的“侧边菜单”适配（推荐横屏方案）

在横屏（尤其是平板）场景下：

• 竖屏：底部 Tab / 抽屉菜单
• 横屏：左侧固定菜单

if (this.isLandscape) {
  Row() {
    SideMenu()
    MainContent()
  }
} else {
  Column() {
    MainContent()
    BottomTab()
  }
}

五、常见问题排查

✅ 横屏黑边
→ 检查 orientation 和布局是否写死尺寸

✅ 菜单被遮挡
→ 使用 SafeArea 或 padding

✅ 旋转后菜单不更新
→ 监听 display.on('change')

六、总结一句话

OpenHarmony 菜单适配横屏 = 允许横屏 + 响应式布局 + 根据屏幕方向切换菜单形态

如果你指的是 某个具体菜单（系统设置、Ability Menu、IDE 菜单、平板侧边栏），可以告诉我具体场景，我可以直接给你代码。