HarmonyOS NEXT组件绑定popup弹窗，如何将弹窗背景设置成透明状态?

Question

HarmonyOS NEXT组件绑定popup弹窗，如何将弹窗背景设置成透明状态?

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

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) 
  } 
}