HarmonyOS 鸿蒙Next 如何知晓List中的某一条数据是否正在可见的区域显示？

可使用onVisibleAreaChange事件实现诉求 

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[@State](/user/State) str:string = '完全不可见'
build() {
Column() {
Text(this.str)
.fontSize(24)
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item: number,index:number) => {
ListItem() {
if(index==2){
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
// 组件可见区域变化事件
.onVisibleAreaChange([0,1],(isVisible: boolean, currentRatio: number)=>{
if(currentRatio==0){
this.str = '完全不可见'
}else if (currentRatio==1){
this.str = '完全可见'
}else {
this.str = '部分可见'
}
})
}else {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}
}, (item: string) => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
console.info('center' + centerIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
})
.width('90%')
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}