Jetpack Compose LazyRow/Column初始加载如何实现首项居中

问题现象 #

实现带Snapper吸附、无限滚动能力的LazyRow时，手动滚动触发的居中吸附逻辑可正常运行，但应用冷启动首次进入页面时，首个条目无法自动居中到屏幕中央。

现有实现代码 #

@OptIn(ExperimentalSnapperApi::class)
@Composable
fun CircularList(
    data: List<SingleBox>,
    modifier: Modifier = Modifier,
    isEndless: Boolean = true
) {
    val listState = rememberLazyListState(
        if (isEndless) Int.MAX_VALUE / 2 else 0
    )

    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    val contentPadding = PaddingValues(horizontal = screenWidth / 2) // 水平内边距控制条目起始位置
    BoxWithConstraints {
        LazyRow(
            state = listState,
            modifier = modifier,
            contentPadding = contentPadding,
            flingBehavior = rememberSnapperFlingBehavior(listState, SnapOffsets.Center, snapIndex = { _, startIndex, targetIndex ->
                targetIndex.coerceIn(startIndex - 7, startIndex + 7) // 滚动停止时将条目吸附到页面中心
            })
        )
        {
            items(
                count = if (isEndless) Int.MAX_VALUE else data.size, // 实现无限滚动
                itemContent = {
                    val index = it % data.size
                    CustomItem(data[index])    // 自定义条目组件
                },
            )
        }
    }
}

效果对比 #

• 实际启动效果：
  
• 预期启动效果：
  

解决方案 #

问题核心原因有两点：

• Snapper的吸附逻辑仅在fling/手动滚动结束时触发，首次渲染组件时不会自动执行吸附
• 无限滚动场景下设置的初始索引Int.MAX_VALUE / 2无法保证刚好对应数据列表的0号条目，且初始偏移量未对齐到居中位置

修复步骤：

1. 计算无限滚动场景下对应数据0号条目的正确初始索引，保证首次加载显示的是第一条数据
2. 在LazyRow首次完成布局后，通过副作用方法主动触发滚动，将初始条目对齐到屏幕中心

修正后的完整代码：

@OptIn(ExperimentalSnapperApi::class)
@Composable
fun CircularList(
    data: List<SingleBox>,
    modifier: Modifier = Modifier,
    isEndless: Boolean = true
) {
    // 计算无限滚动下对应数据0项的初始索引，保证取余后刚好映射到第一条数据
    val initialIndex = if (isEndless) {
        ((Int.MAX_VALUE / 2) / data.size) * data.size
    } else 0

    val listState = rememberLazyListState(initialIndex)
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    val contentPadding = PaddingValues(horizontal = screenWidth / 2)

    // 首次布局完成后主动将条目滚动到居中位置
    LaunchedEffect(Unit) {
        // 不需要入场动画可替换为scrollToItem
        listState.animateScrollToItem(
            index = initialIndex,
            scrollOffset = 0
        )
    }

    BoxWithConstraints {
        LazyRow(
            state = listState,
            modifier = modifier,
            contentPadding = contentPadding,
            flingBehavior = rememberSnapperFlingBehavior(
                listState = listState,
                snapOffsetForItem = SnapOffsets.Center,
                snapIndex = { _, startIndex, targetIndex ->
                    targetIndex.coerceIn(startIndex - 7, startIndex + 7)
                }
            )
        )
        {
            items(
                count = if (isEndless) Int.MAX_VALUE else data.size,
                itemContent = {
                    val index = it % data.size
                    CustomItem(data[index])
                },
            )
        }
    }
}

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