HarmonyOS Span组件无法弹出Popup弹窗？

Question

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

  // popup构造器定义弹框内容
  @Builder
  popupBuilder() {
    Column() {

    }
    .width(600)
    .height(372)
  }

  build() {
    Column() {
      Text() {
        Span('一昨丹阳王气销，尽将豪侈谢尘嚣。')
        Span('衣冠不复宗唐代，父老犹能道晋朝。')
          .bindPopup(this.customPopup, {
            builder: this.popupBuilder, // 气泡的内容
            placement:Placement.Bottom, // 气泡的弹出位置
            popupColor:Color.White, // 气泡的背景色
            radius: 10,
            arrowOffset: 20,
            mask: {color: '#80000000'},
            onStateChange: (e) => {
              console.info(JSON.stringify(e.isVisible))
              if (!e.isVisible) {
                this.customPopup = false
              }
            }
          })
          .fontColor(Color.Blue)
          .textBackgroundStyle({color: "#7F007DFF", radius: "5vp"})
        Span('万岁楼边谁唱月，千秋桥上自吹箫。')
        Span('青山不与兴亡事，只共垂杨伴海潮。')
      }
      Button('Span无法弹出Popup')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .margin({top: 100})
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Answer 1

目前规格如此，Span没有对应独立的FrameNode，和它的父组件共用一个FrameNode，所以给span绑定bindPopup不起作用。

目前的解决方案是将popup绑定到text上面，然后设置移动popup的位置就可以了，可通过offset属性调整位置。

bindPopup参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-popup-V5\#bindpopup