🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2023年华为云十佳博主，2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀一、Popup

Popup组件通常用于在屏幕上弹出一个对话框或者浮动窗口。这个组件通常和其他组件一起用于用户界面的交互和反馈。

Popup组件可以包含任何类型的组件或内容，比如文本、按钮、输入框、图片等等。在打开和关闭Popup时，可以在代码中设置不同的动画效果来增强用户体验。

Popup组件的使用场景有很多，比如弹出确认框、提示框、菜单、下拉框等等。在开发移动应用或桌面应用时，Popup组件是非常常见和重要的组件之一。

在HarmonyOS中气泡分为两种类型，

• 一种是系统提供的气泡PopupOptions：通过配置primaryButton、secondaryButton来设置带按钮的气泡。

• 一种是开发者可以自定义的气泡CustomPopupOptions：通过配置builder参数来设置自定义的气泡。

🔎1.文本提示气泡

文本提示Popup气泡是一种在页面上弹出的提示框，通常用于向用户展示重要信息或提示用户进行操作。它可以显示文本、图标和按钮，并可以自定义样式和位置。在网站或应用程序中使用文本提示Popup气泡可以提高用户体验和交互性，帮助用户更好地理解和使用功能。

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
        })
    }.width('100%').padding({ top: 5 })
  }
}

🔎2.带按钮提示气泡

带按钮提示的 Popup 气泡通常用于提供一些重要的提示信息以及给用户提供一些操作选项以及选择权。带按钮的提示气泡通常包含一个文本消息和一个或多个按钮，这些按钮使用户能够执行所需的操作或关闭提示。例如，您可能会看到带有“是”、“否”、“取消”按钮的提示气泡，以便用户可以选择执行或取消一项操作。

@Entry
@Component
struct PopupExample22 {
  @State handlePopup: boolean = false
  build() {
    Column() {
      Button('PopupOptions').margin({top:200})
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          primaryButton:{
            value:'Confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          secondaryButton: {
            value: 'Cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
            }
          },
        })
    }.width('100%').padding({ top: 5 })
  }
}

🔎3.自定义气泡

自定义Popup气泡是指在设计和开发过程中，根据需求和设计风格，对Popup的样式、布局、交互等进行个性化定制的过程。通过自定义Popup气泡，可以让页面更加生动、实用、美观，提升用户体验和品牌形象。

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
      Text('This is Custom Popup').fontSize(15)
    }.width(200).height(50).padding(5)
  }
  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({x:100,y:200})
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder, // 气泡的内容
          placement:Placement.Bottom, // 气泡的弹出位置
          popupColor:Color.Pink // 气泡的背景色
        })
    }
    .height('100%')
  }
}

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”