React Native
的FlatList
有一个属性viewabilityConfigCallbackPairs
,您可以在其中设置:
viewabilityConfig: {
itemVisiblePercentThreshold: 50,
waitForInteraction: true,
}
以检测具有50%的阈值并且在交互或滚动之后的列表的可见项目。
Jetpack Compose是否也有类似的功能?LazyListState
有一些布局信息。但我想知道是否有任何内置的组件/属性用于此用例。
编辑
我有一个cardviews列表,我想检测哪些卡项目(至少50%的卡是可见的)在显示器上可见。但它只需要在用户点击卡片或滚动列表时才能被检测到。
2条答案
按热度按时间drnojrws1#
要获取当前可见项目的更新列表,可以使用特定阈值
LazyListState
。LazyListState
暴露当前可见项目的列表List<LazyListItemInfo>
。使用offset
和size
属性可以很容易地计算visibility percent
,从而对visibility >= threshold
的可见列表应用过滤器。LazyListItemInfo
具有index
属性,可用于将LazyListItemInfo
Map到传递给LazyColumn
的列表中的实际数据项。用法
必须首先将此列表Map到
LazyColumn
中的相应项。r1wp621o2#
LazyListState#layoutInfo
包含可见项**的信息。因为你想应用一个阈值,你需要根据视口大小检查第一个和最后一个项目的位置和大小。所有其他项目是肯定可见的。
需要注意的是,由于您正在阅读
state
,因此应该使用**derivedStateOf
**来避免冗余的重新组合。类似于:
然后用途:
通过这种方式,您可以获得阈值为50%的所有可见项的列表。您可以使用以下命令观察列表: