Android Compose Accompanist：如何监听无限Pager的页面变化？

要避免重复计算真实页面索引的逻辑，核心思路是把计算逻辑抽离复用，下面提供两种实用方案：

方案1：抽离成工具函数（简单直接） #

把真实页面的计算逻辑封装成一个独立函数，在页面渲染和状态监听两处统一调用：

// 封装计算逻辑的工具函数
fun calculateRealPage(rawIndex: Int, startIndex: Int, pageCount: Int): Int {
    return (rawIndex - startIndex).floorMod(pageCount)
}

在状态监听中使用 #

val pagerState = rememberPagerState(initialPage = startIndex)

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { rawPage ->
        val realPage = calculateRealPage(rawPage, startIndex, pageCount)
        // 执行你的页面变化逻辑
    }
}

在HorizontalPager渲染中使用 #

HorizontalPager(
    count = Int.MAX_VALUE,
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp),
    itemSpacing = 4.dp,
    modifier = Modifier.weight(1f).fillMaxWidth()
) { index ->
    val realPage = calculateRealPage(index, startIndex, pageCount)
    PagerSampleItem(
        page = realPage,
        modifier = Modifier.fillMaxWidth().aspectRatio(1f)
    )
}

方案2：封装自定义LoopingPagerState（优雅封装） #

如果想进一步封装无限滚动的所有逻辑，避免暴露底层的raw索引，可以自定义一个状态类，把真实页面的计算、滚动操作都封装进去：

// 自定义无限Pager状态类
class LoopingPagerState(
    val innerPagerState: PagerState,
    private val pageCount: Int,
    private val startIndex: Int
) {
    // 直接获取当前真实页面
    val currentRealPage: Int
        get() = (innerPagerState.currentPage - startIndex).floorMod(pageCount)

    // 封装滚动到真实页面的方法
    suspend fun animateScrollToRealPage(page: Int) {
        // 加大量偏移确保滚动方向符合预期（避免从Int.MAX_VALUE边界反向滚动）
        val targetRawIndex = startIndex + page + (pageCount * 1000)
        innerPagerState.animateScrollToPage(targetRawIndex)
    }

    // 封装计算指定raw索引对应的真实页面
    fun getRealPage(rawIndex: Int): Int {
        return (rawIndex - startIndex).floorMod(pageCount)
    }
}

// 提供Compose记忆方法
@Composable
fun rememberLoopingPagerState(
    pageCount: Int,
    initialRealPage: Int = 0
): LoopingPagerState {
    val startIndex = Int.MAX_VALUE / 2 - (Int.MAX_VALUE / 2) % pageCount + initialRealPage
    val innerState = rememberPagerState(initialPage = startIndex)
    return remember(innerState, pageCount, startIndex) {
        LoopingPagerState(innerState, pageCount, startIndex)
    }
}

使用自定义状态 #

val loopingPagerState = rememberLoopingPagerState(pageCount = yourPageCount)

// 监听真实页面变化
LaunchedEffect(loopingPagerState) {
    snapshotFlow { loopingPagerState.currentRealPage }.collect { realPage ->
        // 执行你的逻辑
    }
}

// 渲染Pager
HorizontalPager(
    count = Int.MAX_VALUE,
    state = loopingPagerState.innerPagerState,
    contentPadding = PaddingValues(horizontal = 32.dp),
    itemSpacing = 4.dp,
    modifier = Modifier.weight(1f).fillMaxWidth()
) { index ->
    val realPage = loopingPagerState.getRealPage(index)
    PagerSampleItem(
        page = realPage,
        modifier = Modifier.fillMaxWidth().aspectRatio(1f)
    )
}

关键注意点 #

• 必须使用floorMod而非普通的%：因为当rawIndex小于startIndex时（反向滚动到边界），普通取模会得到负数，floorMod能保证结果始终是0到pageCount-1之间的合法索引。
• startIndex的计算要确保初始位置在Int.MAX_VALUE的中间区域，避免快速滚动触发边界问题。

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