HarmonyOS鸿蒙Next中如何获取ListItemGroup组件当前可见的ListItem元素索引值

【问题现象】

当使用List组件嵌套ListItemGroup组件，展示一个分组列表时，无法获取外层ListItem的索引值。

预期效果： 得到当前位置的外层组件ListItem的索引值。

实际效果： 只能得到内层组件ListItemGroup的索引值。

如下图：

问题代码如下：

List({ space: 20 }) {
  ForEach(this.timeTable, (item: TimeTable) => {
    ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) {
      ForEach(item.projects, (project: string) => {
        ListItem() {
          Text(project)
        }
      }, (item: string) => item)
    }
  })
}
// 有子组件划入或划出List组件显示区域时触发
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
  // firstIndex:List显示区域内第一个子组件的索引值。
  hilog.info(null, 'first' + firstIndex, null)
  // lastIndex：List组件显示区域内最后一个子组件的索引值。
  hilog.info(null, 'last' + lastIndex, null)
  // centerIndex：List组件显示区域内中间位置、子组件的索引值。 
  hilog.info(null, 'center' + centerIndex, null)
})

【背景知识】

• List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
• ListItem：用来展示列表具体item，必须配合List来使用。
• ListItemGroup：该组件用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。
• onScrollIndex：有子组件划入或划出List显示区域时触发。
• onVisibleAreaChange：组件可见区域变化时触发该回调。

【定位思路】

ListItemGroup没有类似onScrollIndex的API，所以拿不到当前的ListItemGroup子组件ListItem的索引值。

【解决方案】

ListItem的可见状态发生变化，可以使用API onVisibleAreaChange来监听。当ListItem被滚动到可见区域，触发onVisibleAreaChange回调，拿到当前ListItem索引值。

核心代码如下：

ListItemGroup({ header: this.ListGroupHead(itemGroup.title) }) {
  ForEach(itemGroup.contacts, (item: Contact, index: number) => {
    ListItem() {
      Text(item.name)
    }
    // ListItemGroup的可见区域发生变化时，触发API，并且可以拿到对应的item，List组件的索引值等诸多参数。
    // [0, 1]，阈值数组。其中，每个阈值代表组件可见面积。可见区域变成0%和100%的时候，会触发，再根据isVisible，就可以判断当前是0%还是100%
    .onVisibleAreaChange([0, 1], (isVisible: boolean, currRatio: number) => {
      // isVisible：表示组件的可见面积与自身面积的比值与上一次变化相比的情况，比值变大为true，比值变小为false
      if (isVisible) {
        hilog.info(null, 'onVisibleAreaChange: isVisible' + currRatio + item.name + index, null)
      } else {
        hilog.info(null, 'onVisibleAreaChange: unVisible' + currRatio + item.name + index, null)
      }
    })
  })
}