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)

相关推荐
Georgewu10 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu10 小时前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos
Chen--Xing12 小时前
第一届OpenHarmonyCTF--Crypto--WriteUp
网络安全·密码学·harmonyos
HarmonyOS_SDK14 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉14 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会14 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
周胡杰16 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶18 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶18 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少19 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos