OpenHarmony菜单如何动态更新

在 OpenHarmony（ArkUI，eTS/ArkTS） 中，“菜单动态更新”通常指 菜单项（MenuItem）根据数据变化实时变化，常见场景包括：

• 长按菜单（bindMenu / bindContextMenu）
• 右上角更多菜单（Menu 组件）
• 侧边/底部弹窗菜单

下面按 常见方式 + 示例 说明。

一、核心原理（重点）

✅ 菜单内容由 @State 或 @Link 等响应式数据驱动
✅ 菜单在每次弹出时重新构建 ✅ 只要数据变，菜单就会自动更新

二、方式一：bindMenu 动态菜单（最常用）

1️⃣ 使用 @State 控制菜单数据

@Entry
@Component
struct Index {
  @State menuItems: string[] = ['复制', '粘贴']

  build() {
    Column() {
      Text('长按我')
        .fontSize(20)
        .padding(20)
        .bindMenu(this.menuItems.map(item => {
          return {
            value: item,
            action: () => {
              console.log(item)
            }
          }
        }))
    }
  }
}

2️⃣ 动态更新菜单

aboutToAppear() {
  setTimeout(() => {
    this.menuItems = ['复制', '粘贴', '删除', '分享']
  }, 2000)
}

✅ 2 秒后再次长按，菜单自动变化

三、方式二：bindContextMenu（右键 / 长按）

@State items: MenuItemOptions[] = []

build() {
  Text('区域菜单')
    .bindContextMenu(
      this.items,
      ResponseType.RightClick
    )
}

动态修改 this.items 即可。

四、方式三：Menu 组件（手动控制）

适合 自定义按钮触发菜单

@State showMenu: boolean = false
@State menus: string[] = ['A', 'B']

build() {
  Column() {
    Button('菜单')
      .onClick(() => {
        this.showMenu = true
      })

    if (this.showMenu) {
      Menu() {
        ForEach(this.menus, (item) => {
          MenuItem({ content: item })
            .onClick(() => {
              console.log(item)
            })
        })
      }
    }
  }
}

更新 menus 数组即可动态变化。

五、方式四：根据权限 / 状态动态生成

@State isLogin: boolean = false

get menuList() {
  return this.isLogin
    ? ['个人中心', '退出登录']
    : ['登录', '注册']
}

.bindMenu(
  this.menuList.map(i => ({
    value: i,
    action: () => {}
  }))
)

六、常见坑 ⚠️

❌ 用 let / 普通变量存菜单 → 不会更新
✅ 必须用 @State / @Link / @Prop

❌ 在 aboutToAppear 之外改数据但不触发 UI
✅ 确保是 响应式数据

七、总结

如果你有 具体版本（API 9 / 10 / 11） 或 特定菜单类型（系统菜单 / 自定义菜单），我可以给你更精确的示例。