HarmonyOS List组件中ListItem能否获取到当前的坐标点，如何判断距离屏幕中间的距离？

Question

如题：HarmonyOS List组件中ListItem能否获取到当前的坐标点，如何判断距离屏幕中间的距离？

Answer 1

可以使用一个数组来记录List中当前显示的ListItem，根据ListItem的Index和当前List控件滚动的距离 可以获取到显示的ListItem距离屏幕中间的距离

参考示例如下：

@Entry
@Component
struct ListDemoPage {
  scroller: Scroller = new Scroller()
  imgList: Resource[] = []
  @State endIndex: number = -1
  // 记录需要上报的item的index
  @State trackArr: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 11; i++) {
      this.imgList.push($r('app.media.preview'))
    }
  }

  build() {
    Column() {
      List({ scroller: this.scroller,space: 10 }) {
        ForEach(this.imgList, (item: Resource, index: number) => {
          ListItem() {
            Image(item)
              .width(350)
              .height('100%')
              .objectFit(ImageFit.Contain)
              .borderRadius(4)
          }
          .height(500)
          .backgroundColor(Color.Gray)
          .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
            if (isVisible && currentRatio >= 1.0) {
              if (this.trackArr.indexOf(index) === -1) {
                this.trackArr.push(index)
              }
            }
            if (!isVisible) {
              if (this.trackArr.indexOf(index) > -1) {
                this.trackArr.splice(this.trackArr.indexOf(index), 1)
              }
            }
          })
        }, (item: Resource) => JSON.stringify(item))
      }
      .onScrollIndex((first: number, end: number, center: number) => {
        this.endIndex = center
      })
      .onScrollStop(() => {
        console.log('result array ==> ' + JSON.stringify(this.trackArr))
      })
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
      .edgeEffect(EdgeEffect.None)
      .backgroundColor(Color.Transparent)
    }
    .width('100%')
    .height('100%')
  }
}