如何判断Jetpack Compose中的可组合项是否已显示在屏幕上？

核心问题 #

假设屏幕上存在n个可组合项（示例代码如下），这些项的显示状态受终端尺寸、布局组合等因素影响，可能全部显示也可能仅部分可见。已知可通过ScrollState大致了解可见项数量，但想知道：可组合项能否自行感知自身是否已显示在屏幕上？Compose是否原生支持该功能，还是必须借助ScrollState来实现？

示例代码 #

data class MyItem()

@Composable
fun MyComposable(myItem: MyItem, onExpose: () -> Unit) {
    Box {
        // 业务逻辑：当可组合项任何部分暴露在屏幕上时，调用onExpose
    }  
}

@Composable
fun MyComposableList() {
    // 也可以用LazyColumn，此处用Column示例
    Column {
        MyComposable(MyItem()) { println("Item 1 Exposed!!") }
        MyComposable(MyItem()) { println("Item 2 Exposed!!") }
        MyComposable(MyItem()) { println("Item 3 Exposed!!") }
        // ... 更多项
        MyComposable(MyItem()) { println("Item N Exposed!!") }
    }
}

解决方案 #

Compose原生支持让可组合项自行感知屏幕可见性，无需依赖ScrollState，主要通过以下两种方式实现：

1. 通用方案：全局布局坐标+窗口可见区域判断

通过Modifier.onGloballyPositioned获取可组合项的屏幕绝对坐标，结合LocalWindowInfo获取当前窗口可见区域，判断两者是否存在交集，即可确定可组合项是否处于显示状态。

修改后的MyComposable示例：

@Composable
fun MyComposable(myItem: MyItem, onExpose: () -> Unit) {
    val windowInfo = LocalWindowInfo.current
    var hasExposed by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .onGloballyPositioned { coordinates ->
                // 获取可组合项在屏幕上的绝对矩形区域
                val itemRect = coordinates.boundsInWindow()
                // 获取当前窗口的可见区域
                val windowRect = windowInfo.currentWindowBounds

                // 判断是否有交集（只要有部分区域可见就算暴露）
                val isVisible = itemRect.intersect(windowRect).isEmpty.not()
                if (isVisible && !hasExposed) {
                    hasExposed = true
                    onExpose()
                } else if (!isVisible) {
                    hasExposed = false
                }
            }
    ) {
        // 原有业务逻辑
    }
}

2. Lazy列表专属方案：利用LazyListState监听

如果使用LazyColumn/LazyRow，Compose提供的LazyListState可以更精准地跟踪项的可见状态，无需额外的全局布局监听：

@Composable
fun MyLazyComposableList() {
    val listState = rememberLazyListState()
    val items = List(10) { MyItem() }

    LazyColumn(state = listState) {
        itemsIndexed(items) { index, item ->
            val isVisible = remember { mutableStateOf(false) }
            
            // 通过LazyListState判断当前项是否可见
            LaunchedEffect(listState) {
                snapshotFlow { listState.layoutInfo.visibleItemsInfo }
                    .collect { visibleItems ->
                        val currentItemVisible = visibleItems.any { it.index == index }
                        if (currentItemVisible && !isVisible.value) {
                            isVisible.value = true
                            onExpose()
                        } else if (!currentItemVisible) {
                            isVisible.value = false
                        }
                    }
            }
            
            MyComposable(item) { println("Item ${index+1} Exposed!!") }
        }
    }
}

关键说明 #

• 通用方案适用于所有类型的可组合容器（包括普通Column/Row），但需要自行处理可见性判断逻辑；
• Lazy列表专属方案更高效，因为Lazy组件本身会维护项的可见状态，无需额外的全局布局回调；
• 两种方案都不需要依赖ScrollState，可让可组合项独立完成可见性感知。

内容的提问来源于stack exchange，提问作者H.Kim