HarmonyOS 鸿蒙Next 开发 ArkTS 如何获取List 组件可见范围

HarmonyOS 鸿蒙Next 开发 ArkTS 如何获取List 组件可见范围 有个需求，当新数据来实话，需要根据旧数据的值，设置一些字段。

因为List 对应的对象数组可能比较长，为了优化，想只获取List 组件可见范围对应的数据项，请问如何获取？

7 回复

请问用懒加载请求数据给List组件，是否可以达到你的要求？

更多关于HarmonyOS 鸿蒙Next 开发 ArkTS 如何获取List 组件可见范围的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


  1. 上一次请求到的行情数据是个list ，计为ListOld；
  2. 本次请求得到的行情数据是个list ，计为ListNew；
  3. 找到对应可见范围内的list 项，visibleList = ListNew.subList(startVisiblePosition，endVisiblePosition)
  4. 对visibleList ，按照股票的代码逐个从ListOld 找到对应的上次的价格，对比本次的价格 更新 riseOrNot 字段。
  5. 根据visibleList 每一项的riseOrNot 字段设置动画

感觉通过懒加载并不能实现第三步，懒加载只是在更新完数据后创建组件会有优化而已，

希望HarmonyOS能继续加强在安全性方面的研发，保护用户的隐私和数据安全。

已找到对应的API，谢谢各位大佬

我是做金融app 。然后股票的行情需要定时刷新，本次的股票价格如果比上一次高，就要有个动画。我的思路是：

  1. 上一次请求到的行情数据是个list ，计为ListOld；
  2. 本次请求得到的行情数据是个list ，计为ListNew；
  3. 找到对应可见范围内的list 项，visibleList = ListNew.subList(startVisiblePosition，endVisiblePosition)
  4. 对visibleList ，按照股票的代码逐个从ListOld 找到对应的上次的价格，对比本次的价格 更新 riseOrNot 字段。
  5. 根据visibleList 每一项的riseOrNot 字段设置动画

感觉通过懒加载并不能实现第三步，懒加载只是在更新完数据后创建组件会有优化而已

可以使用懒加载模式，可以看看官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-rendering-control-lazyforeach-0000001524417213-V3?catalogVersion=V3

示例代码

// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  public totalCount(): number {
    return 0;
  }
  public getData(index: number): any {
    return undefined;
  }
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}
class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];
  public totalCount(): number {
    return this.dataArray.length;
  }
  public getData(index: number): any {
    return this.dataArray[index];
  }
  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }
  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}
@Entry
@Component
struct MyComponent {
  aboutToAppear() {
    for (var i = 100; i >= 80; i--) {
      this.data.pushData(`Hello ${i}`)
    }
  }
  private data: MyDataSource = new MyDataSource();
  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          this.data.pushData(`Hello ${this.data.totalCount()}`);
        })
      }, item => item)
    }.cachedCount(5)
  }
}

在HarmonyOS（鸿蒙Next）开发中，使用ArkTS获取List组件的可见范围可以通过监听onVisibleAreaChange事件来实现。该事件会在组件的可见区域发生变化时触发，返回当前组件在屏幕上的可见比例和位置信息。

具体实现步骤如下：

  1. 在List组件或其子组件上绑定onVisibleAreaChange事件。
  2. 在事件回调函数中，通过参数获取组件的可见比例（visibleRatio）和位置信息（visibleRect）。
  3. 根据visibleRect可以获取组件的可见范围，包括左上角和右下角的坐标。

示例代码：

List() {
  // List子组件
  ForEach(this.items, (item) => {
    ListItem() {
      Text(item)
        .onVisibleAreaChange((ratio: number, rect: Rect) => {
          // ratio 为可见比例，rect 为可见区域的位置信息
          console.log(`Visible Ratio: ${ratio}`);
          console.log(`Visible Rect: ${JSON.stringify(rect)}`);
        })
    }
  })
}

其中，Rect对象包含以下属性：

  • left: 可见区域左边界坐标。
  • top: 可见区域上边界坐标。
  • right: 可见区域右边界坐标。
  • bottom: 可见区域下边界坐标。

通过以上方法，可以获取List组件或其子组件的可见范围。

回到顶部