获取Scroll容器组件内指定组件的坐标值

获取Scroll容器组件内指定组件的坐标值

HarmonyOS
2024-06-04 23:26:22
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
幸运小面

可通过以下两种方式获取组件坐标:方案一:给组件绑定onAreaChange属性来获取组件位置信息,将组件信息用数组存起来。scrollTo的yOffset通过数组下标来获取。

方案二:导入@ohos.arkui.componentUtils,通过getRectangleById来获取组件位置信息

示例代码

demo:

...  
    scroller: Scroller = new Scroller()  
    private componentsInfo: Position[] = []  
    private currentId: number = 1 // 要滚动的子组件索引  
... 
Stack() { 
  Scroll(this.scroller) { 
    Column() { 
      Button('LazyForEach') 
        .fontSize(20) 
        .margin({ bottom: 20 }) 
        .fontWeight(FontWeight.Bold) 
        .onAreaChange((oldValue: Area, newValue: Area) => { 
          this.componentsInfo[0] = newValue.position 
        }) 
      Button('web H5') 
        .fontSize(20) 
        .margin({ bottom: 20 }) 
        .fontWeight(FontWeight.Bold) 
        .onAreaChange((oldValue: Area, newValue: Area) => { 
          this.componentsInfo[1] = newValue.position 
        }) 
    } 
  } 
  Button('WebH5').onClick(() => { 
    this.scroller.scrollTo({ xOffset: 0, yOffset: this.componentsInfo[this.currentId].y as number }) 
  }) 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

参考链接

组件区域变化事件onAreaChage​​componentUtils.getRectangleById

分享
微博
QQ
微信
回复
2024-06-05 19:58:15
相关问题
Scroll容器中子组件吸顶效果
1072浏览 • 1回复 待解决
Scroll组件显示不全问题
1884浏览 • 1回复 待解决
HarmonyOS 如何获取,某组件坐标
836浏览 • 1回复 待解决
HarmonyOS 获取组件坐标的方法
984浏览 • 1回复 待解决
如何可以获取组件中心点坐标
1247浏览 • 1回复 待解决
HarmonyOS如何获取指定组件宽高
2092浏览 • 1回复 待解决
HarmonyOS scroll组件问题
909浏览 • 1回复 待解决
Polyline组件绘制坐标不准确
2895浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动控制
931浏览 • 1回复 待解决
HarmonyOS 子组件如何获取自身大小
1100浏览 • 1回复 待解决