Jetpack Compose中为Horizontal Pager设置恒定滚动速度

要实现无论用户滚动手势快慢，Pager都保持恒定滚动速度的效果，核心是自定义FlingBehavior，完全接管滚动动画逻辑，忽略用户输入的初始速度，强制使用固定参数执行滚动。以下是具体实现方案：

1. 自定义ConstantSpeedFlingBehavior #

继承FlingBehavior并重写performFling方法，忽略用户输入的速度值，根据手势方向确定目标页面，再用固定时长完成滚动：

class ConstantSpeedFlingBehavior(
    private val pagerState: PagerState,
    private val scrollDurationPerPage: Long = 300 // 每页滚动的固定时长，数值越小速度越快
) : FlingBehavior {
    override suspend fun ScrollScope.performFling(initialVelocity: Float): Float {
        // 根据手势方向确定目标页面，忽略原始速度大小
        val targetPage = when {
            initialVelocity > 0 -> pagerState.currentPage + 1
            initialVelocity < 0 -> pagerState.currentPage - 1
            else -> return 0f // 无有效手势，终止滚动
        }.coerceIn(0, pagerState.pageCount - 1) // 限制页面范围，避免越界

        // 用固定时长执行滚动动画，实现恒定速度
        pagerState.animateScrollToPage(
            page = targetPage,
            animationSpec = tween(durationMillis = scrollDurationPerPage.toInt())
        )
        return 0f // 表示滚动逻辑已完全处理，无需系统默认fling
    }
}

2. 在HorizontalPager中使用自定义Behavior #

替换原来的flingBehavior参数，传入自定义的ConstantSpeedFlingBehavior：

HorizontalPager(
    modifier = Modifier.weight(10f),
    state = pagerState,
    verticalAlignment = Alignment.Top,
    flingBehavior = ConstantSpeedFlingBehavior(
        pagerState = pagerState,
        scrollDurationPerPage = 350 // 根据需求调整时长
    )
) { page ->
    PagerScreen(onBoardingPage = pages[page])
}

3. 更精细的速度控制（可选） #

如果需要基于像素/单位时间的精确速度控制（比如每秒滚动300dp），可以通过页面宽度计算滚动时长：

// 在Composable中获取密度和页面宽度
val density = LocalDensity.current
val pagerWidth = remember { mutableStateOf(0) }

// 自定义Behavior时传入计算后的时长
val fixedSpeedDpPerSecond = 300f // 每秒滚动300dp
val pageWidthPx = with(density) { pagerWidth.value.toFloat() }
val scrollDuration = (pageWidthPx / density.run { fixedSpeedDpPerSecond.dp.toPx() } * 1000).toLong()

// Pager的modifier添加onSizeChanged获取宽度
HorizontalPager(
    modifier = Modifier
        .weight(10f)
        .onSizeChanged { pagerWidth.value = it.width },
    // ...其他参数
    flingBehavior = ConstantSpeedFlingBehavior(pagerState, scrollDuration)
) { /*...*/ }

为什么之前的SnapFlingBehavior无法实现？ #

SnapFlingBehavior的动画逻辑依赖用户输入的初始速度，会自动切换lowVelocityAnimationSpec和highVelocityAnimationSpec，即使调整这两个参数，滚动速度仍会随用户手势快慢变化。而自定义Behavior完全忽略用户输入的速度，强制使用固定动画参数，才能实现恒定速度。

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