HarmonyOS 希望可以推荐一个弹窗组件,可以做到弹窗位置直接可以设置 锚定在某个组件之下

目前来看，可以使用bindPopup来实现，参考链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-popup-V5

参考demo：

@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State handlePopup: boolean = false
build() {
Column() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('200vp')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.Orange)
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, { // PopupOptions类型气泡的内容
message: 'This is a popup with PopupOptions This is a popup with PopupOptions' +
' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
messageOptions: { // 气泡的文本样式
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
width: '100%',
radius: 0,
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
}
})
}
.height('100%')
}
}

目前来看 没有比较好的弹窗组件去实现这个功能,建议还是使用bindPopup.