如何滚动到Jetpack Compose中LazyRow列表项的中心位置？

问题背景 #

LazyRow的LazyListState提供了animateScrollToItem方法，但该方法仅能将目标列表项滚动到视图末尾。想要实现滚动到列表项中心位置，尝试通过传入scrollOffset（比如listItem.width / 2）来实现，但无法提前获取目标列表项的宽度；使用visibleItemsInfo获取尺寸的方式也仅在列表项已显示在屏幕上时有效，未显示时无法获取到相关信息。

解决方案1：滚动后调整位置 #

先通过animateScrollToItem将目标项滚动到可见区域，待滚动完成后，再根据visibleItemsInfo中的尺寸信息调整到中心位置。

代码实现：

suspend fun LazyListState.animateScrollToItemCenter(index: Int) {
    // 先滚动到目标项，确保其进入视图
    animateScrollToItem(index)
    // 等待滚动完成并获取目标项信息
    val targetItem = awaitLayout { layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } }
    targetItem?.let { itemInfo ->
        val viewportCenter = layoutInfo.viewportEndOffset / 2
        val itemCenter = itemInfo.offset + itemInfo.size / 2
        val offset = itemCenter - viewportCenter
        // 调整滚动位置到中心
        animateScrollBy(offset.toFloat())
    }
}

// 辅助函数：等待布局完成并获取目标项
private suspend fun <T> awaitLayout(block: () -> T): T? {
    return suspendCoroutine { cont ->
        val job = LaunchedEffect(Unit) {
            snapshotFlow { block() }
                .filterNotNull()
                .first()
                .let(cont::resume)
        }
        cont.invokeOnCancellation { job.cancel() }
    }
}

解决方案2：预存列表项尺寸 #

通过onGloballyPositioned回调记录每个列表项的尺寸，滚动时直接使用预存的尺寸计算偏移量。

代码实现：

1. 创建存储尺寸的State：

val itemSizes = remember { mutableStateMapOf<Int, Int>() }

2. 在LazyRow的Item中添加尺寸记录：

LazyRow(state = lazyListState) {
    items(itemsList) { item ->
        ItemView(item = item) {
            Modifier.onGloballyPositioned { coordinates ->
                itemSizes[item.index] = coordinates.size.width
            }
        }
    }
}

3. 实现滚动到中心的方法：

suspend fun LazyListState.animateScrollToItemCenter(index: Int, itemSizes: Map<Int, Int>) {
    val itemWidth = itemSizes[index]
    if (itemWidth != null) {
        val viewportCenter = layoutInfo.viewportEndOffset / 2
        // 计算偏移量：让项的中心对齐视图中心
        val scrollOffset = viewportCenter - (itemWidth / 2)
        animateScrollToItem(index, scrollOffset)
    } else {
        // 若尺寸未记录，先滚动到项，再调整
        animateScrollToItem(index)
        val targetItem = awaitLayout { layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } }
        targetItem?.let { itemInfo ->
            val viewportCenter = layoutInfo.viewportEndOffset / 2
            val itemCenter = itemInfo.offset + itemInfo.size / 2
            val offset = itemCenter - viewportCenter
            animateScrollBy(offset.toFloat())
        }
    }
}

说明 #

• 方案1无需提前存储尺寸，适合动态尺寸的列表项，仅需处理滚动后的位置调整；
• 方案2提前存储尺寸，滚动更流畅，但需要确保每个item的尺寸被正确记录，适合尺寸固定或变化较少的列表。

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