如何用Kotlin的LazyColumn实现单次滚动单个项的Reels功能？

你遇到的问题是rememberSnapFlingBehavior仅能在滚动结束时对齐Item，但无法限制用户一次性滑动多个Item。下面是针对LazyColumn的解决方案，既能保证性能，又能实现单次滚动单个Item的效果：

核心思路 #

自定义FlingBehavior拦截滚动动作，强制每次仅滚动到相邻的Item；同时监听滚动结束状态，修正手动拖动时的偏移，确保最终停在单个Item位置。

1. 自定义单次滚动的FlingBehavior #

这个行为会拦截快速滑动（Fling）动作，直接滚动到目标相邻Item，避免跳过多个内容：

fun LazyListState.rememberSingleItemSnapFlingBehavior(): FlingBehavior {
    val baseSnapBehavior = rememberSnapFlingBehavior(SnapLayoutInfoProvider(this))
    return remember(this, baseSnapBehavior) {
        object : FlingBehavior by baseSnapBehavior {
            override suspend fun ScrollScope.performFling(initialVelocity: Float): Float {
                val firstVisibleIndex = firstVisibleItemIndex
                val totalItems = layoutInfo.totalItemsCount
                if (totalItems == 0) return 0f

                // 根据滑动速度判断方向
                val direction = if (initialVelocity > 0) 1 else -1
                val targetIndex = (firstVisibleIndex + direction).coerceIn(0, totalItems - 1)

                // 直接滚动到目标Item，终止原始Fling动作
                animateScrollToItem(targetIndex)
                return 0f
            }
        }
    }
}

2. 结合滚动结束修正（处理手动拖动） #

如果用户手动拖动未触发Fling，需要在滚动结束时修正位置，确保停在完整的Item上：

val listState = rememberLazyListState()

// 监听滚动结束，修正偏移
LaunchedEffect(listState) {
    snapshotFlow { !listState.isScrollInProgress }
        .filter { it }
        .collect {
            val firstVisibleItem = listState.layoutInfo.visibleItemsInfo.firstOrNull() ?: return@collect
            val itemHeight = firstVisibleItem.size.height
            val offset = firstVisibleItem.offset

            when {
                // 向下拖动超过一半，滚动到下一个Item
                offset > itemHeight / 2 -> {
                    listState.animateScrollToItem(listState.firstVisibleItemIndex + 1)
                }
                // 向上拖动超过一半，滚动到上一个Item
                offset < -itemHeight / 2 -> {
                    listState.animateScrollToItem(listState.firstVisibleItemIndex - 1)
                }
                // 偏移不足一半，回到当前Item
                else -> {
                    listState.animateScrollToItem(listState.firstVisibleItemIndex)
                }
            }
        }
}

3. 在LazyColumn中使用 #

将自定义的FlingBehavior和状态绑定到LazyColumn：

LazyColumn(
    state = listState,
    flingBehavior = listState.rememberSingleItemSnapFlingBehavior(),
    modifier = Modifier.fillMaxSize()
) {
    items(100) { index ->
        // 替换为你的Reels Item布局，这里用固定高度示例
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .background(Color.hsv(index * 3.6f, 0.7f, 0.9f)),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Reel Item $index", fontSize = 24.sp)
        }
    }
}

适配可变高度Item #

如果你的Reels Item高度不固定，无需额外修改代码——layoutInfo.visibleItemsInfo会自动获取当前Item的实际高度，修正逻辑依然有效。

内容的提问来源于stack exchange，提问作者Anas Mirza