概述：
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%')
}
}
