3.8、HarmonyOS Next 气泡提示(Popup)

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

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

文本提示气泡

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

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

带按钮的提示气泡

通过 primaryButtonsecondaryButton 属性为气泡最多设置两个 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)

相关推荐
Georgewu1 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉1 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu1 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20003 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉4 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡7 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95278 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹49 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界20 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~1 天前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos