Accompanist HorizontalViewPager滑动页面切换延迟问题求助

问题描述 #

使用Accompanist库的HorizontalViewPager时，滑动切换页面存在延迟：只有当滑动超过下一页的一半时，页面文本才会切换；滑动未超过一半时，文本会恢复到之前的状态。希望滑动过程中能立即看到对应页面的文本状态，无需滑过半页。

原因分析 #

问题核心在于页面内容的索引获取逻辑：当前代码使用pagerState.currentPage来获取页面数据，但currentPage的更新规则是只有滑动距离超过页面宽度一半（默认阈值）时才会切换值，这就导致了文本切换的延迟。

而HorizontalPager的content lambda会传入一个pageIndex参数，这个参数是当前正在布局的页面索引——滑动过程中每个可见页面都会被布局，使用该索引就能实时获取对应页面的内容。

解决方案 #

将HorizontalPager内容中获取页面数据的逻辑，从pagerState.currentPage改为使用lambda传入的pageIndex。底部的页面指示器仍保留pagerState.currentPage，因为指示器需要显示最终选中的页面，而非滑动过程中的临时页面。

修改后的代码 #

@OptIn(ExperimentalPagerApi::class)
@Composable
fun TutorialScreen(
    viewModel: TutorialScreenViewModel,
    state: TutorialScreenState
) {
    val pagerState = rememberPagerState()

    Column {
        Column(
            modifier = Modifier.weight(1f)
        ) {
            HorizontalPager(
                count = state.tutorial.pages.size,
                state = pagerState
            ) { pageIndex ->
                TutorialPage(state.tutorial.pages[pageIndex])
            }
        }

        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            repeat(state.tutorial.pages.size) {
                Box(
                    modifier = Modifier
                        .clip(CircleShape)
                        .size(10.dp)
                        .background(if (it == pagerState.currentPage) Color.Gray else Color.LightGray)
                ) {

                }
                Spacer(
                    modifier = Modifier.width(8.dp)
                )
            }
        }
    }
}

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