HarmonyOS 鸿蒙Next 气泡PopupOptions和自定义的气泡CustomPopupOptions设置popupColor无效

【关键字】

PopupOptions / CustomPopupOptions / popupColor

【问题描述】

在API 11中使用系统提供的气泡PopupOptions和自定义的气泡CustomPopupOptions设置popupColor，展示的popup显示背景不是设置的颜色，有白色叠加在上面，具体如下图所示。

Demo示例代码如下：

@Preview
@Entry
@Component
export struct test {
@State handlePopup: boolean = false
@State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder
popupBuilder() {
Row({ space: 2 }) {
Text(‘This is Custom Popup’).fontSize(15)
}.width(200).height(50).padding(5)
}
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 = false
}
},
popupColor: Color.Black
})
Button(‘CustomPopupOptions’)
.position({ x: 100, y: 200 })
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder, // 气泡的内容
placement: Placement.Bottom, // 气泡的弹出位置
popupColor: Color.Pink, // 气泡的背景色
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.customPopup = false
}
}
})
}.width(‘100%’).padding({ top: 5 })
}}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【解决方案】

API 11新增了backgroundBlurStyle参数，默认在气泡上加了一个厚的模糊层，导致设置颜色无效，加上backgroundBlurStyle:BlurStyle.NONE这个配置就可以了。

具体可参见文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup-0000001862607349

参考代码如下：

@Preview
@Entry
@Component
export struct test {
@State handlePopup: boolean = false
@State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder
popupBuilder() {
Row({ space: 2 }) {
Text(‘This is Custom Popup’).fontSize(15)
}.width(200).height(50).padding(5)
}
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 = false
}
},
backgroundBlurStyle:BlurStyle.NONE,
popupColor: Color.Black
})
Button(‘CustomPopupOptions’)
.position({ x: 100, y: 200 })
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder, // 气泡的内容
placement: Placement.Bottom, // 气泡的弹出位置
backgroundBlurStyle:BlurStyle.NONE,
popupColor: Color.Pink, // 气泡的背景色
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.customPopup = false
}
}
})
}.width(‘100%’).padding({ top: 5 })
}
}