前言

Popup 是 HarmonyOS 中常用的信息提示组件，用于在按钮或组件附近弹出提示气泡。与 bindContextMenu 的操作菜单不同，Popup 更适合信息提示和简短输入引导。

在「猫猫大作战」中，Popup 用于首次进入游戏时的昵称设置引导、得分规则说明、以及操作提示。

本文讲解 Popup 的完整使用方法。

一、Popup 基础

@State showPopup: boolean = false;

Button('猫咪等级说明')
  .bindPopup(this.showPopup, {
    message: '猫咪从 1 级到 6 级，相同等级相邻自动合并升级。',
    placement: PopupPlacement.Bottom,
    showInSubWindow: false,
    onStateChange: (state) => { this.showPopup = state; }
  })
  .onClick(() => { this.showPopup = !this.showPopup; })

二、Popup 配置参数

三、游戏中的应用

@State showScoreHint: boolean = false;

// 得分规则提示
Text('❓ 得分规则')
  .fontSize(14).fontColor('#95A5A6')
  .bindPopup(this.showScoreHint, {
    message: '小猫: 10分 | 中猫: 30分 | 大猫: 90分\n'
      + '特大猫: 270分 | 超级猫: 810分 | 传奇猫: 2430分\n'
      + '连续合并在 2 秒内触发连击倍率，最高 5 倍！',
    placement: PopupPlacement.Top,
    popupColor: Color.White,
    enableArrow: true,
  })
  .onClick(() => { this.showScoreHint = !this.showScoreHint; })

四、Popup vs bindContextMenu

五、最佳实践

1. Popup 用于提示信息，操作菜单用 bindContextMenu
2. placement 选择合适位置，避免气泡被遮挡
3. 长文本折行：用 \n 换行或限制宽度
4. 点击外部自动关闭：设置 onStateChange 监听关闭事件

总结

Popup 在组件旁弹出提示气泡，适合游戏中规则说明和操作提示。核心要点：bindPopup(state, config) 绑定、 placement 控制弹出位置、 点击外部自动关闭。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• bindPopup 官方文档
• PopupPlacement 枚举
• 第 101 篇：anchorPosition
• 第 103 篇：stat-item