在HarmonyOS NEXT开发中组件绑定popup弹窗，如何将弹窗背景设置成透明状态？

Question

在HarmonyOS NEXT开发中组件绑定popup弹窗，如何将弹窗背景设置成透明状态？问题场景：
popupColor设置成透明但弹窗还是默认白色背景

Image($r("app.media.gray_tips_icon")) 
  .width($r("app.string.dp15")) 
  .height($r("app.string.dp15")) 
  .onClick(() => { 
    this.tipPopup = !this.tipPopup 
  }) 
  .bindPopup(this.tipPopup, { 
    builder: this.popupBuilder(), 
    placement: Placement.Top, 
    mask: false, 
    popupColor: Color.Transparent, 
    enableArrow: true, 
    showInSubWindow: false, 
    onStateChange: (e) => { 
      if (!e.isVisible) { 
        this.tipPopup = false 
      } 
    }, 
    arrowOffset: $r("app.string.dp50"), 
    offset: { x: $r("app.string.dp20") }, 
    radius: $r("app.string.dp8") 
  })

Answer 1

参考代码：

@Entry 
@Component 
struct PopupExample { 
  @State handlePopup: boolean = false 
  @Builder popupBuilder(){ 
    Text('气泡的内容') 
  } 
 
  build() { 
    Column() { 
      Button('PopupOptions') 
        .onClick(() => { 
          this.handlePopup = !this.handlePopup 
        }) 
        .bindPopup(this.handlePopup, { 
          builder: this.popupBuilder(),//内容 
          placement:Placement.Bottom, // 气泡的弹出位置 
          maskColor: Color.Transparent, 
          popupColor:Color.Transparent, // 气泡的背景色 
          backgroundBlurStyle: BlurStyle.NONE, 
          shadow: { 
            radius:0 
          }, 
          onStateChange: (e) => { 
            console.info(JSON.stringify(e.isVisible)) 
            if (!e.isVisible) { 
              this.handlePopup = false 
            } 
          } 
        }) 
    } 
    .justifyContent(FlexAlign.Center) 
    .height('100%') 
    .width('100%') 
    .padding({ top: 5 }) 
    .backgroundColor(Color.Pink) 
  } 
}