#鸿蒙通关秘籍#如何自定义一个气泡？

在HarmonyOS中，自定义气泡可以通过CustomPopupOptions实现。通过@Builder定义气泡的自定义内容，同时可以设置气泡的样式和位置：

@Entry
@Component
struct Index {
  @State customPopup: boolean = false

  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
      Text('This is Custom Popup').fontSize(15)
    }.width(200).height(50).padding(5)
  }

  build() {
    Column() {
      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) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }
    .height('100%')
  }
}

自定义气泡通过builder定义，灵活度更高。