Jetpack Compose中LazyRow实现仅吸附相邻元素起始位置的滚动方法

完全可以实现LazyRow滚动时仅停靠到上一个/下一个元素的起始位置，或者任意指定位置的效果，和RecyclerView的吸附滚动（Snappy Scrolling）能力一致。下面是两种常用的实现方案：

方案1：使用官方原生吸附行为（推荐） #

从Compose 1.3.0版本开始，foundation组件库已经内置了吸附滚动的支持，无需自定义逻辑即可快速实现：

val lazyListState = rememberLazyListState()
// 初始化吸附Fling行为
val flingBehavior = rememberSnapFlingBehavior(lazyListState = lazyListState)

LazyRow(
    state = lazyListState,
    flingBehavior = flingBehavior,
    horizontalArrangement = Arrangement.spacedBy(12.dp),
    modifier = Modifier.fillMaxWidth()
) {
    items(10) { index ->
        Box(
            modifier = Modifier
                .fillParentMaxWidth(0.85f)
                .height(220.dp)
                .background(Color.Gray.copy(alpha = 0.3f), RoundedCornerShape(16.dp))
        ) {
            Text(text = "元素 $index", modifier = Modifier.align(Alignment.Center))
        }
    }
}

默认的吸附规则是将元素对齐到视口中心，如果你需要自定义吸附到元素的起始位置，可以通过自定义SnapLayoutInfoProvider修改规则：

val customSnapProvider = remember {
    object : SnapLayoutInfoProvider by DefaultSnapLayoutInfoProvider(lazyListState) {
        override fun calculateSnapOffset(
            layoutInfo: LazyListLayoutInfo,
            itemIndex: Int,
            itemOffset: Int
        ): Int {
            // 返回0即代表元素左边缘对齐LazyRow的左边缘
            return 0
        }
    }
}
// 传入自定义规则生成Fling行为
val flingBehavior = rememberSnapFlingBehavior(snapLayoutInfoProvider = customSnapProvider)

方案2：手动控制滚动停靠（适配低版本/自定义需求） #

如果你的Compose版本低于1.3.0，或者需要更精细的控制（比如限制一次只能滚动一个元素、自定义滚动阈值），可以通过监听滚动状态手动控制停靠位置：

val lazyListState = rememberLazyListState()
val scope = rememberCoroutineScope()
// 单个元素的宽度，也可以通过lazyListState.layoutInfo动态获取
val itemWidth = 300.dp.value.roundToInt()

// 监听滚动状态，滚动停止时触发停靠逻辑
LaunchedEffect(lazyListState.isScrollInProgress) {
    if (!lazyListState.isScrollInProgress) {
        val firstItemIndex = lazyListState.firstVisibleItemIndex
        val firstItemOffset = lazyListState.firstVisibleItemScrollOffset
        // 滚动超过元素宽度一半则停靠到下一个元素，否则停靠回当前元素
        val targetIndex = if (firstItemOffset > itemWidth / 2) firstItemIndex + 1 else firstItemIndex
        // 第二个参数为偏移量，传0即对齐到元素起始位置
        scope.launch {
            lazyListState.animateScrollToItem(targetIndex, 0)
        }
    }
}

LazyRow(
    state = lazyListState,
    modifier = Modifier.fillMaxWidth()
) {
    // 你的列表项实现
}

通用技巧 #

• 如果需要跳转到任意指定位置，直接调用lazyListState.scrollToItem(index, offset)或lazyListState.animateScrollToItem(index, offset)即可，第二个参数offset可以控制元素和列表起始边的距离，实现任意位置的停靠
• 如果元素宽度不固定，可以通过lazyListState.layoutInfo.visibleItemsInfo动态获取可见元素的宽度、位置信息，计算停靠位置更精准
• 官方的SnapFlingBehavior已经适配了快速滑动、手势冲突等场景，无特殊需求优先使用官方实现

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