实现两个HorizontalPager同步滑动：同步触发且滑动幅度一致

要让两个HorizontalPager实现同时触发滑动、滑动幅度完全一致的同步效果，核心是让二者的滚动状态（当前页面、页面内偏移量）保持实时同步。以下是具体实现方案：

完整实现代码 #

val pagerState = rememberPagerState(initialPage = 0)
val pagerStateTop = rememberPagerState(initialPage = 0)
val pages = arrayListOf<Int>(1, 2, 3, 4, 5, 6, 7)

// 同步顶部Pager状态到底部Pager
LaunchedEffect(pagerStateTop.currentPage, pagerStateTop.currentPageOffsetFraction) {
    pagerState.scrollToPage(
        page = pagerStateTop.currentPage,
        pageOffset = pagerStateTop.currentPageOffsetFraction
    )
}

// 同步底部Pager状态到顶部Pager
LaunchedEffect(pagerState.currentPage, pagerState.currentPageOffsetFraction) {
    pagerStateTop.scrollToPage(
        page = pagerState.currentPage,
        pageOffset = pagerState.currentPageOffsetFraction
    )
}

Column(modifier = Modifier.fillMaxSize()) {
    HorizontalPager(
        modifier = Modifier.fillMaxWidth(),
        pageCount = pages.size,
        state = pagerStateTop,
    ) { page ->
        Image(
            modifier = Modifier.fillMaxWidth().absolutePadding(10.dp,20.dp,10.dp,20.dp),
            contentDescription = "Pager image",
            painter = painterResource(id = androidx.core.R.drawable.ic_call_answer)
        )
    }

    HorizontalPager(
        modifier = Modifier.fillMaxSize(),
        pageCount = pages.size,
        state = pagerState,
    ) { page ->
        Text(
            modifier = Modifier.fillMaxSize(),
            textAlign = TextAlign.Center,
            text = "Content DATA ${pages[page]}"
        )
    }
}

关键实现说明 #

• 双向状态监听：通过两个LaunchedEffect分别监听两个PagerState的currentPage（当前页面索引）和currentPageOffsetFraction（页面内滚动偏移比例），这两个参数共同决定了Pager的实时滚动位置。
• 实时同步滚动：当任意一个Pager的滚动状态发生变化时，调用另一个PagerState的scrollToPage方法，传入完全相同的页面索引和偏移量，确保二者滚动幅度、位置完全一致。
• 初始状态对齐：显式给rememberPagerState指定initialPage = 0，确保两个Pager初始状态完全同步（默认值也是0，显式声明更清晰）。

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