List 官方组件如何获取 滚动区域内内容真实高度 HarmonyOS 鸿蒙Next

在鸿蒙Next中，获取List组件滚动区域内内容的真实高度，可以通过List组件的onScrollIndex和onScroll事件结合List的layoutInfo属性来实现。layoutInfo属性提供了当前List布局的相关信息，包括子组件的位置和尺寸。

具体步骤如下：

1. 使用List组件的onScrollIndex或onScroll事件监听滚动行为。
2. 通过List的layoutInfo属性获取当前可见区域内的子组件信息。
3. 遍历layoutInfo中的子组件信息，累加每个子组件的高度，得到滚动区域内内容的真实高度。

示例代码如下：

@Entry
@Component
struct ListExample {
  private listHeight: number = 0;

  build() {
    List({ space: 10 }) {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item) => {
        ListItem() {
          Text(`Item ${item}`)
            .height(100)
            .width('100%')
            .backgroundColor(Color.Gray)
        }
      }, item => item.toString())
    }
    .onScrollIndex((firstIndex: number, lastIndex: number) => {
      // 计算滚动区域内内容的高度
      this.calculateListHeight(firstIndex, lastIndex);
    })
    .width('100%')
    .height('100%')
  }

  private calculateListHeight(firstIndex: number, lastIndex: number) {
    let totalHeight = 0;
    for (let i = firstIndex; i <= lastIndex; i++) {
      totalHeight += 100; // 假设每个子组件高度为100
    }
    this.listHeight = totalHeight;
    console.log(`滚动区域内内容真实高度：${this.listHeight}`);
  }
}

该代码通过onScrollIndex事件获取当前可见区域的起始和结束索引，然后根据索引计算滚动区域内内容的高度。