学习笔记（十七）：ArkUi-气泡提示 (Popup)

概述：

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

一、系统气泡，PopupOptions

通过配置primaryButton、secondaryButton来设置带按钮的气泡

 

1、文本气泡

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

Button('点击显示气泡')
          .onClick(()=>{
            this.showPopup = true
          })
          .bindPopup(this.showPopup, {message:'气泡内容'})

监听气泡显示状态

Button('点击显示气泡')
          .onClick(()=>{
            this.showPopup = true
          })
          .bindPopup(this.showPopup,
            {
              message:'气泡内容',
              onStateChange:(e)=>{
                this.showPopup = e.isVisible
              }
            })

 

2、带按钮的提示气泡

通过primaryButton、secondaryButton属性为气泡最多设置两个Button按钮 

Button('点击显示气泡')
          .onClick(()=>{
            this.showPopup = true
          })
          .bindPopup(this.showPopup,
            {
              message:'气泡内容',
              onStateChange:(e)=>{
                this.showPopup = e.isVisible
              },
              primaryButton:{
                value:"确定按钮",
                action:()=> {
                  console.log('点击了确定')
                }
              }
              ,secondaryButton:{
              value:'取消',
              action:()=>{
                console.log('点击了取消')
              }
            }
            })

 

二、自定义气泡，CustomPopupOptions 

使用构建器CustomPopupOptions创建自定义气泡，@Builder中可以放自定义的内容

@Entry
@Component
struct PopupExample {
  @State showPopup :boolean = false // 是否显示气泡
  // 自定义构建函数组件,自定义气泡的内容元素
  @Builder mPopupView(){
    Text('自定义气泡内容元素')
      .padding(20)
  }
  build() {
    Row() {
      Column() {
        Button('点击显示气泡')
          .onClick(()=>{
            this.showPopup = true
          })
          .bindPopup(this.showPopup,{
            builder: this.mPopupView, // 自定义内容
            placement: Placement.Bottom, // 气泡弹出位置
            popupColor: Color.Red, // 气泡背景色
            onStateChange:(e)=>{
              this.showPopup = e.isVisible
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}