【HarmonyOS NEXT】氣泡預設顏色和API 10不同，設定popupColor屬性無法修改氣泡顏色

​

【關鍵字】

HarmonyOS NEXT、氣泡提示、Popup、popupColor

【問題背景】

API 10介面的氣泡顏色是‘#4d4d4d’的，但是使用API 11後，氣泡顏色變成透明的了，然後透過popupColor屬性設定其他顏色都無效。

【API 10的效果】

​

【API 11的效果】

​

在PopupOptions中設定 popupColor: '#4d4d4d', 仍然沒有效果。

【問題分析及解決方案】

API 11氣泡的預設效果發生了變化，氣泡顏色預設是透明色並加上模糊背景填充效果。模糊背景填充效果由新增屬性backgroundBlurStyle控制，預設使用了超厚材質模糊，導致顏色被蓋住。所以如果要設定所需的氣泡顏色，只需要設定backgroundBlurStyle:BlurStyle.NONE 就可以了，具體可參見文件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup-0000001774121186。

示例程式碼：

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .position({ x: 100, y: 50 })
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          width: 300,
          message: 'This is a popup with PopupOptions',
          arrowPointPosition: ArrowPointPosition.START,
          backgroundBlurStyle:BlurStyle.NONE,
          popupColor: Color.Pink,
          autoCancel: true,
        })
    }
    .width('100%')
    .height('100%')
  }}

​