HarmonyOS 鸿蒙Next scroll中有A,B,C,D等组件 获取B中一个text距离屏幕最顶端的距离及组件可见时机 并获取当前滑动距离

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next scroll中有A,B,C,D等组件 获取B中一个text距离屏幕最顶端的距离及组件可见时机 并获取当前滑动距离

scroll中有A,B,C,D等组件,我想获取B中一个text距离屏幕最顶端的距离(或者列表足够长,我想知道这个组件什么时候真正在屏幕中被用户可见),并且获取当前滑动距离

Harmonyos Next教程
3 回复

获取组件的位置可以通过onAreaChange获取组件位置，然后自己通过计算判断组件是否显示了，参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-component-area-change-event-V13#onareachange

关于scorll的滑动距离参考文档中的onScroll时间，参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-scroll-V13#%E4%BA%8B%E4%BB%B6

更多关于HarmonyOS 鸿蒙Next scroll中有A,B,C,D等组件 获取B中一个text距离屏幕最顶端的距离及组件可见时机 并获取当前滑动距离的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


import { hilog } from '@kit.PerformanceAnalysisKit'


@Entry
@ComponentV2
struct Index {
  private scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller) {
      Column() {
        Text('A')
          .width('100%')
          .height('75%')
          .backgroundColor(Color.Blue)
          .id('a')
        Text('b')
          .width('100%')
          .height('75%')
          .backgroundColor(Color.Pink)
          .id('b')
          .onClick(() => {
            let info = this.getUIContext().getComponentUtils().getRectangleById('b')
            hilog.debug(0x000000, 'rainrain', '距离屏幕的距离 == ' + info.screenOffset.y)
          })
        Text('c')
          .width('100%')
          .height('75%')
          .backgroundColor(Color.Orange)
          .id('c')
          .onVisibleAreaChange([1], (isShow: boolean, target: number) => {
            if (isShow && target == 1) {
              let scrollY = this.scroller.currentOffset().yOffset
            }
          })
      }.width('100%')
    }
  }
}

在HarmonyOS鸿蒙系统中，可以通过组件树和布局测量机制来获取B组件中text距离屏幕最顶端的距离、组件可见时机以及当前滑动距离。以下是简要方法：

  1. 获取B组件中text距离屏幕最顶端的距离：

    • 利用Component.getBoundingClientRect()方法获取B组件的边界矩形。
    • 获取B组件在父容器中的相对位置。
    • 递归计算B组件到根组件（屏幕）的偏移量，加上text在B组件内的偏移量。

  2. 组件可见时机：

    • 监听页面或容器的滚动事件，使用PageScrollEvent或自定义滚动监听器。
    • 在滚动事件中判断B组件的边界是否进入或离开可视区域。

  3. 获取当前滑动距离：

    • 使用PageScrollListener或相关组件的滚动监听器。
    • 在滚动回调中获取ScrollEvent，其中包含了滚动偏移量。

示例代码（简化版，不包含具体实现细节）：

// 伪代码，用于说明思路
rect = BComponent.getBoundingClientRect();
offsetY = calculateOffsetToRoot(BComponent) + textOffsetYInB;

scrollListener = new PageScrollListener() {
    onScroll(ScrollEvent event) {
        scrollOffset = event.getScrollOffset();
        if (isComponentVisible(rect, scrollOffset)) {
            // B组件可见
        }
    }
};
page.addScrollListener(scrollListener);

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部