如何实现LazyColumn单屏滚动切换列表项？

要实现每个列表项占满全屏、滚动时切换到对应项的效果，你需要调整列表项的高度，并通过LazyListState监听滚动状态来控制自动定位。以下是修改后的完整代码：

@Composable
fun FullScreenLazyColumn() {
    val list = listOf("A", "B", "C", "D") + (0..100).map { it.toString() }
    val lazyListState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp

    // 监听滚动结束，自动定位到全屏项
    LaunchedEffect(lazyListState.isScrollInProgress) {
        if (!lazyListState.isScrollInProgress) {
            val firstVisibleIndex = lazyListState.firstVisibleItemIndex
            val itemOffset = lazyListState.firstVisibleItemScrollOffset

            // 根据偏移量判断目标项，确保滚动后只停留在单个全屏项
            val targetIndex = if (itemOffset > screenHeight / 2) {
                firstVisibleIndex + 1
            } else {
                firstVisibleIndex
            }.coerceIn(0, list.lastIndex)

            // 平滑滚动到目标项
            scope.launch {
                lazyListState.animateScrollToItem(targetIndex)
            }
        }
    }

    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        state = lazyListState,
        // 关闭惯性滚动，避免一次跳过多个项
        flingBehavior = ScrollableDefaults.flingBehavior(enabled = false)
    ) {
        items(list) { item ->
            Box(
                modifier = Modifier
                    .fillMaxSize() // 让列表项占满整个屏幕
                    .border(2.dp, Color.Black),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = item,
                    textAlign = TextAlign.Center,
                    fontSize = 56.sp
                )
            }
        }
    }
}

关键修改说明： #

• 全屏列表项：给每个列表项的Box添加.fillMaxSize()，确保项占满屏幕宽高。
• 滚动定位逻辑：通过LazyListState获取当前可见项的偏移量，判断滚动方向后自动平滑滚动到目标项，保证每次滚动只切换一个项。
• 禁用惯性滚动：关闭默认的fling效果，避免一次滚动跳过多个列表项。

内容的提问来源于stack exchange，提问作者Yunus Emrah Uluçay