如何检查 Jetpack Compose 中列表项的可见性

Question

React Native的FlatList有一个属性viewabilityConfigCallbackPairs可以在其中设置：

viewabilityConfig: {
    itemVisiblePercentThreshold: 50,
    waitForInteraction: true,
  }

以 50% 的阈值和交互或滚动后检测列表的可见项。

Jetpack Compose 也有类似的东西吗？

LazyListState 有一些布局信息。但我想知道这个用例是否有任何内置组件/属性。

编辑

我有一个卡片视图列表，我想检测哪些卡片项目（至少 50% 的卡片可见）在显示器上可见。但只有当卡片被点击或列表被用户滚动时才需要检测。

Answer 1

可以使用LazyListState获取具有一定阈值的当前可见项目的更新列表。

LazyListState 公开当前可见项目List<LazyListItemInfo> 的列表。很容易计算 visibility percent 使用 offset 和 size 属性，从而将过滤器应用于 visibility >= threshold 的可见列表。

LazyListItemInfo 具有index 属性，可用于将LazyListItemInfo 映射到传递给LazyColumn 的列表中的实际数据项。

fun LazyListState.visibleItems(itemVisiblePercentThreshold: Float) =
    layoutInfo
        .visibleItemsInfo
        .filter {
            visibilityPercent(it) >= itemVisiblePercentThreshold
        }

fun LazyListState.visibilityPercent(info: LazyListItemInfo): Float {
    val cutTop = max(0, layoutInfo.viewportStartOffset - info.offset)
    val cutBottom = max(0, info.offset + info.size - layoutInfo.viewportEndOffset)

    return max(0f, 100f - (cutTop + cutBottom) * 100f / info.size)
}

---

用法

val list = state.visibleItems(50f) // list of LazyListItemInfo

这个列表必须首先映射到LazyColumn中的对应项目。

val visibleItems = state.visibleItems(50f)
            .map { listItems[it.index] }

---

@Composable
fun App() {
    val listItems = remember { generateFakeListItems().toMutableStateList() }

    val state = rememberLazyListState()

    LazyColumn(Modifier.fillMaxSize(), state = state) {
        items(listItems.size) {
            Item(listItems[it])
        }
    }

    val visibleItems = state.visibleItems(50f)
        .map { listItems[it.index] }

    Log.d(TAG, "App: $visibleItems")
}

fun generateFakeListItems() = (0..100).map { "Item $it" }