如何为Jetpack Compose的全屏ScrollableRow元素添加页面吸附效果？

直接用官方的HorizontalPager组件就能解决你的问题，它内置了分页吸附逻辑，比自己用ScrollableRow手动处理要简单得多。

步骤1：引入依赖 #

确保你的项目中包含Pager相关依赖（适配Compose 1.4+版本）：

dependencies {
    implementation "androidx.compose.foundation:foundation-pager:1.6.0"
}

步骤2：替换ScrollableRow为HorizontalPager #

把原来的ScrollableRow代码替换成以下实现：

// 创建Pager状态，指定总页数
val pagerState = rememberPagerState(pageCount = { myData.items.size })

HorizontalPager(
    modifier = Modifier.fillMaxSize(),
    state = pagerState,
    pageSize = PageSize.Fill, // 每个页面占满全屏
    scrollBehavior = PagerDefaults.horizontalPagerScrollBehavior() // 默认自带页面吸附效果
) { pageIndex ->
    val pageItem = myData.items[pageIndex]
    showPage(pageItem)
}

这样滑动后会自动吸附到完整页面，完全符合你想要的效果：左滑直接切换到下一个全屏页面，右滑切换到上一个。

若必须保留ScrollableRow（不推荐） #

如果因特殊需求要保留ScrollableRow，需手动处理滚动吸附逻辑：

1. 监听滚动结束事件
2. 根据当前滚动位置计算目标页面的起始偏移
3. 调用动画滚动到目标位置

示例代码如下：

val scrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
val screenWidth = LocalConfiguration.current.screenWidthDp.dp

ScrollableRow(
    modifier = Modifier.fillMaxSize(),
    scrollState = scrollState,
    flingBehavior = rememberFlingBehavior(scrollState) { velocity ->
        // 计算目标页面与偏移量
        val currentOffset = scrollState.value
        val targetPage = (currentOffset / screenWidth.toPx()).roundToInt()
        val targetOffset = (targetPage * screenWidth.toPx()).toInt()
        
        coroutineScope.launch {
            scrollState.animateScrollTo(targetOffset)
        }
        // 拦截fling事件，避免继续滚动
        0f
    }
) {
    myData.items.forEachIndexed { index, pageItem ->
        showPage(pageItem)
            .width(screenWidth)
            .fillMaxHeight()
    }
}

这种方式需要自行处理屏幕尺寸计算、事件拦截等细节，远不如HorizontalPager省心，优先推荐官方Pager组件。

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