如何在Jetpack Compose中实现无限滚动的Pager组件

你提供的原始代码如下：

Box(
    modifier = Modifier.size(100.dp),
    contentAlignment = Alignment.Center
) {
    val pagerState = rememberPagerState()
    val items = listOf("A", "B", "C")
    androidx.compose.foundation.pager.HorizontalPager(
        state = pagerState,
        pageCount = items.size,
        modifier = Modifier,
        verticalAlignment = Alignment.CenterVertically
    ) { page ->
        Text(
            text = items[page],
            modifier = Modifier
        )
    }
}

要实现滚动到最后一项后继续无限滚动的效果，核心是让Pager的总页数模拟无限多，同时循环复用你的item列表，具体修改如下：

Box(
    modifier = Modifier.size(100.dp),
    contentAlignment = Alignment.Center
) {
    val items = listOf("A", "B", "C")
    // 设置极大的总页数，模拟无限滚动的假象
    val pageCount = Int.MAX_VALUE
    // 让Pager从中间位置启动，避免一开始就碰到"边界"
    val initialPage = pageCount / 2
    val pagerState = rememberPagerState(initialPage = initialPage)

    // 监听滚动位置，当距离中间区域过远时自动跳转回去，保持视觉上的无限连贯性
    LaunchedEffect(pagerState.currentPage) {
        val middleOffset = pageCount / 2
        // 当当前页和中间位置的差超过item数量的2倍时，跳转回中间区域
        if (kotlin.math.abs(pagerState.currentPage - middleOffset) > items.size * 2) {
            pagerState.scrollToPage(middleOffset)
        }
    }

    androidx.compose.foundation.pager.HorizontalPager(
        state = pagerState,
        pageCount = pageCount,
        modifier = Modifier,
        verticalAlignment = Alignment.CenterVertically
    ) { page ->
        // 通过取模运算循环获取item，实现内容的无限复用
        val actualItemIndex = page % items.size
        Text(
            text = items[actualItemIndex],
            modifier = Modifier
        )
    }
}

关键修改说明： #

• 无限页数模拟：用Int.MAX_VALUE作为总页数，让用户感知不到滚动边界
• 初始位置居中：从总页数的一半开始滚动，避免用户一开始就触碰到“尽头”
• 循环复用内容：通过page % items.size计算实际展示的item索引，实现列表内容的循环展示
• 边界自动修正：用LaunchedEffect监听滚动位置，当距离中间区域过远时自动跳转，避免Pager真的滚到数值边界，同时保证视觉上无跳转痕迹

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