鸿蒙UI开发之气泡提示（Popup）

Android学习小分队

于 2024-05-05 10:49:53 发布

阅读量959

点赞数 16

文章标签： harmonyos ui 华为

本文链接：https://blog.csdn.net/m0_56144365/article/details/138461527

版权

Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。
气泡分为两种类型，一种是系统提供的气泡PopupOptions，一种是开发者可以自定义的气泡CustomPopupOptions。其中PopupOptions为系统提供的气泡，通过配置primaryButton、secondaryButton来设置带按钮的气泡，CustomPopupOptions通过配置builder参数来设置自定义的气泡。

文本提示气泡

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

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

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

在这里插入图片描述

添加气泡状态变化的事件

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

@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',
          onStateChange: (e)=> {
    // 返回当前的气泡状态
            if (!e.isVisible) {
   
              this.handlePopup =