如何在Jetpack Compose中实现LazyRow无限自动滚动？

核心思路 #

要实现无限自动滚动，需要结合LazyListState控制滚动位置，用协程循环触发滚动，同时通过数据重复填充实现无缝滚动的视觉效果。

完整实现代码 #

// 1. 定义LazyListState，用来控制LazyRow的滚动状态
val lazyListState = rememberLazyListState()

item {
    LazyRow(state = lazyListState) {
        item { Spacer(modifier = Modifier.width(16.dp)) }
        // 2. 重复数据源三次，实现无缝滚动的视觉效果
        val infiniteCategories = data.categories + data.categories + data.categories
        items(infiniteCategories) { category ->
            if(category.discount != null && category.price != null) {
                ItemCard(
                    title = category.name,
                    imageUrl = category.image,
                    discount = category.discount,
                    price = category.price,
                    onClick = onCategoryClick
                )
            }
            Spacer(modifier = Modifier.width(16.dp))
        }
    }
}

// 3. 启动协程实现自动循环滚动
LaunchedEffect(Unit) {
    while (true) {
        // 调整滚动间隔，这里设为2秒
        delay(2000)
        val currentIndex = lazyListState.firstVisibleItemIndex
        val originalItemCount = data.categories.size
        
        // 当滚动到第二个重复块的末尾时，跳回第一个块的对应位置，避免列表无限拉长
        if (currentIndex >= originalItemCount * 2) {
            lazyListState.scrollToItem(originalItemCount)
        } else {
            // 平滑滚动到下一个item
            lazyListState.animateScrollToItem(currentIndex + 1)
        }
    }
}

关键部分说明 #

• LazyListState：作为LazyRow的状态参数，用来获取当前滚动位置、触发滚动操作。
• 重复数据源：将原列表重复三次，滚动到末尾时会衔接开头的内容，视觉上实现无缝。
• 协程循环：通过LaunchedEffect启动一个无限循环协程，每隔固定时间触发滚动。当滚动到第三个重复块时，直接跳回第一个重复块的对应位置，避免列表数据无限累积导致性能问题。
• 平滑滚动：使用animateScrollToItem实现流畅的滚动过渡，提升用户体验。

可选调整 #

• 修改delay(2000)中的数值可以调整滚动间隔。
• 若需要更快的滚动节奏，可以调整每次滚动的步长（比如一次滚动多个item）。
• 原列表为空时，建议添加空值判断避免异常。

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