3.8、HarmonyOS Next 气泡提示（Popup）

Popup 属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。

气泡分为两种类型，一种是系统提供的气泡 PopupOptions，一种是开发者可以自定义的气泡 CustomPopupOptions。其中 PopupOptions 为系统提供的气泡，通过配置 primaryButton、secondaryButton 来设置带按钮的气泡。CustomPopupOptions 通过配置 builder 参数来设置自定义的气泡。

文本提示气泡

文本提示气泡 常用于只展示带有文本的信息提示，不带有任何交互的场景。Popup 属性需绑定组件，当 bindPopup 属性中参数 show 为 true 的时候会弹出气泡提示。

在 Button 组件上绑定 Popup 属性，每次点击 Button 按钮，handlePopup 会切换布尔值，当其为 true 时，触发 bindPopup 弹出气泡。

ts 复制代码

@Entry
@Component
struct PopupPage {

  @State handlePopup: boolean = false
  
  build() {
    Navigation() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
        }).margin({left:15,bottom:15, top:15})
    }
    .title('创建文本')
    .titleMode(NavigationTitleMode.Mini)
  }
}

添加气泡状态变化的事件

通过 onStateChange 参数为气泡添加状态变化的事件回调，可以判断当前气泡的显示状态。

ts 复制代码

@Entry
@Component
struct PopupPage {

  @State handlePopup: boolean = false
  
  build() {
    Navigation() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          onStateChange: (e)=> { // 返回当前的气泡状态
           if (!e.isVisible) {
             this.handlePopup = false
           }
         }
        }).margin({left:15,bottom:15, top:15})
    }
    .title('创建文本')
    .titleMode(NavigationTitleMode.Mini)
  }
}

带按钮的提示气泡

通过 primaryButton、secondaryButton 属性为气泡最多设置两个 Button 按钮，通过此按钮进行简单的交互，开发者可以通过配置 action 参数来设置想要触发的操作。

ts 复制代码

Button('PopupOptions')
      .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
          }
        },
        onStateChange: (e) => {
          if (!e.isVisible) {
            this.handlePopup = false
          }
        }
      }).margin({left:15,bottom:15, top:15})

自定义气泡

开发者可以使用构建器 CustomPopupOptions 创建自定义气泡，@Builder 中可以放自定义的内容。除此之外，还可以通过 popupColor 等参数控制气泡样式。

ts 复制代码

 @Builder example4() {
    Button('PopupOptions')
      .onClick(() => {
        this.handlePopup = !this.handlePopup
      })
      .bindPopup(this.handlePopup, {
        builder: this.popupBuilder(), // 气泡的内容
        placement:Placement.Bottom, // 气泡的弹出位置
        popupColor:Color.Pink, // 气泡的背景色
        onStateChange: (e)=> { // 返回当前的气泡状态
          if (!e.isVisible) {
            this.handlePopup = false
          }
        }
      }).margin({left:15,bottom:15, top:15})
  }

  // 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)
  }

上一篇 3.7、自定义弹窗（CustomDialog）下一篇 3.9、菜单（Menu）