求助：如何实现Jetpack Compose无限向下滚动的垂直动画轮播

你的组件当前在滚动到最后一项时会反向回滚，核心问题是索引切换逻辑和动画方向的边界判断导致了视觉上的反向滚动。要实现持续向下的无限滚动，我们可以调整索引逻辑和动画配置，让循环时的视觉效果保持一致的向下方向。

修改后的代码实现 #

@Composable
fun AnimatedVerticalColumn(
    content: List<@Composable (Modifier) -> Unit>,
    animationTime: Int = 1500,
    delay: Long = 10000
) {
    var currentIndex by remember { mutableStateOf(0) }

    LaunchedEffect(Unit) {
        while (true) {
            delay(delay)
            currentIndex++ // 索引持续递增，不再做取模限制
        }
    }

    val density = LocalDensity.current
    val itemHeight = with(density) { 52.dp.roundToPx() }

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .height(52.dp)
            .clipToBounds() // 裁剪动画过程中超出容器的内容
    ) {
        // 仅渲染当前项和前一项，保证滚动动画的连贯性
        items(2) { offset ->
            var displayIndex = (currentIndex - offset) % content.size
            // 处理负数取模的情况，确保索引始终为正
            if (displayIndex < 0) displayIndex += content.size
            val isCurrentItem = offset == 0

            AnimatedVisibility(
                visible = isCurrentItem || offset == 1,
                enter = slideInVertically(
                    initialOffsetY = { itemHeight }, // 所有新项统一从下方滑入
                    animationSpec = tween(animationTime)
                ),
                exit = slideOutVertically(
                    targetOffsetY = { -itemHeight }, // 所有旧项统一从上方滑出
                    animationSpec = tween(animationTime)
                )
            ) {
                content[displayIndex](
                    Modifier
                        .fillMaxWidth()
                        .height(52.dp)
                        .padding(2.dp)
                )
            }
        }
    }
}

关键修改点说明 #

• 索引逻辑调整：让currentIndex持续递增，不再用取模限制范围，通过(currentIndex - offset) % content.size循环获取内容项，从根源上保证滚动方向始终向下。
• 动画方向统一：移除原代码中针对边界项的反向动画判断，所有新项从下方滑入、旧项从上方滑出，彻底消除反向滚动的视觉效果。
• 容器裁剪：给LazyColumn添加clipToBounds()，防止动画过程中内容超出容器范围，保证视觉整洁。
• 简化动画逻辑：去掉冗余的expandVertically和shrinkVertically，仅保留滑动动画，让滚动效果更自然流畅。

测试代码（无需修改） #

val list = listOf(
    { modifier -> Text(modifier = modifier, text = "item one") },
    { modifier -> Text(modifier = modifier, text = "item two") },
    { modifier -> Text(modifier = modifier, text = "item three") },
)

AnimatedVerticalColumn(list, delay = 3000)

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