HarmonyOS 鸿蒙Next bindPopup在父元素旋转180°后定位不准确
HarmonyOS 鸿蒙Next bindPopup在父元素旋转180°后定位不准确
@Entry
@Component
struct Test1 {
@State arr: number[] = []
aboutToAppear(): void {
for (let index = 0; index < 10; index++) {
this.arr.push(index)
}
}
build() {
NavDestination() {
Column() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
ChildView({item:item})
}.width('100%').height(30)
.rotate({angle: 180})
}, (item: string) => JSON.stringify(item))
}.rotate({angle: 180})
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}.title('test')
}
}
@Component
struct ChildView{
@Prop item:number
@State handlePopup: boolean = false
build() {
Column(){
Text(this.item.toString())
}.bindPopup(this.handlePopup, {
message: `点击的是第${this.item}`,
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
}
}).onClick(()=>{
this.handlePopup = true
})
}
}
List和ListItem都是用rotate旋转了180度,popup显示的位置是错误的
更多关于HarmonyOS 鸿蒙Next bindPopup在父元素旋转180°后定位不准确的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS 鸿蒙Next bindPopup在父元素旋转180°后定位不准确的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
类似微信聊天页面反向显示消息,再弹出popup时
bindPopup的组件中,有个followTransformOfTarget字段,可以设置气泡绑定的宿主组件或其宿主组件的父容器添加了旋转、缩放等变换时,气泡是否能显示在对应变化后的位置上,修改为true即可跟随宿主旋转后变化位置,可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-popup-V13
在HarmonyOS鸿蒙系统中,bindPopup
组件在父元素旋转180°后定位不准确的问题,通常是由于旋转变换影响了子元素的布局和定位计算。bindPopup
依赖于父元素的坐标系统来定位,当父元素发生旋转变换时,子元素的定位原点可能会受到影响,导致位置偏移。
要解决这个问题,可以尝试以下方法:
-
调整定位方式:检查
bindPopup
的定位属性,确保其依赖于不受旋转变换影响的元素或属性。 -
手动调整位置:在旋转父元素后,通过编程方式手动调整
bindPopup
的位置,以补偿旋转变换带来的偏移。 -
使用绝对定位:如果可能,尝试将
bindPopup
设置为绝对定位,并直接指定其在屏幕上的坐标,以避免依赖父元素的坐标系统。 -
避免旋转父元素:如果旋转父元素不是必须的,考虑移除旋转变换,以避免对子元素定位的影响。
以上方法可能需要根据具体情况进行调整。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。