前言

Popup 是一种轻量级的气泡弹层，通常用于提示信息、快捷操作或校验提示。HarmonyOS 通过 bindPopup 属性将 Popup 绑定到组件上。

本文以「猫猫大作战」的猫咪提示气泡为锚点，讲解 Popup 的实现。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–101 篇。本篇是阶段三第 102 篇。

一、Popup 基本用法

1.1 bindPopup

@Entry
@Component
struct Index {
  @State showPopup: boolean = false;

  build() {
    Button('提示')
      .onClick(() => { this.showPopup = true })
      .bindPopup(this.showPopup, {
        message: '这是一个提示气泡',
        onStateChange: (state) => { this.showPopup = state.isVisible }
      })
  }
}

1.2 PopupOptions

二、总结

Popup 通过 bindPopup 绑定到组件，适合轻量的提示气泡。

核心要点：

• .bindPopup(isShow, options) 绑定气泡提示
• message 设置提示文本

下一篇预告：第 103 篇将深入 StatItem — @Builder 子组件的封装复用。

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

相关资源：

• bindPopup API 参考
• 开源鸿蒙跨平台社区
• 第 101 篇：anchorPosition
• 第 103 篇：StatItem