如何阻止Jetpack Compose中HorizontalPager在屏幕边缘左右滑动时触发滚动？

我之前在三星设备上用嵌套HorizontalPager的时候，也碰到过一模一样的糟心问题——明明是想触发系统的边缘返回手势，结果Pager先跟着滚动了，体验特别割裂。后来摸索出了几个靠谱的解决办法，正好适配你的场景，给你说说：

核心思路其实很简单：区分系统边缘手势和用户主动滑动Pager的操作，让Pager在检测到边缘触摸时暂时禁用滚动，或者直接拦截边缘的拖动事件不让Pager响应。

方法一：动态控制Pager的滚动权限 #

这个方法是通过判断触摸起始点是否在系统定义的边缘区域内，动态切换userScrollEnabled的值，逻辑直观也好实现：

1. 先获取系统统一定义的边缘手势阈值，这个值会根据屏幕密度自动调整，适配性比固定数值好太多：

val context = LocalContext.current
val edgeSlop = ViewConfiguration.get(context).scaledEdgeSlop

2. 用一个状态变量来控制Pager是否允许滚动：

val (isScrollAllowed, setIsScrollAllowed) = remember { mutableStateOf(true) }

3. 给外层HorizontalPager添加手势监听，根据触摸位置动态切换状态：

HorizontalPager(
    state = pagerState,
    userScrollEnabled = isScrollAllowed,
    modifier = Modifier
        .pointerInput(Unit) {
            detectHorizontalDragGestures(
                onDragStart = { touchOffset ->
                    // 判断触摸点是否在屏幕左右边缘的阈值范围内
                    val isNearEdge = touchOffset.x <= edgeSlop || touchOffset.x >= size.width - edgeSlop
                    // 如果是边缘触摸，就禁用Pager滚动
                    setIsScrollAllowed(!isNearEdge)
                },
                onDragEnd = {
                    // 拖动结束后恢复允许滚动，避免影响后续正常操作
                    setIsScrollAllowed(true)
                }
            )
        }
) { pageOut ->
    if (pageOut == 0) {
        // 内层Pager如果是全屏的，一定要加同样的处理，否则滑动内层边缘时仍会冲突
        val (innerScrollAllowed, setInnerScrollAllowed) = remember { mutableStateOf(true) }
        HorizontalPager(
            state = pagerStateInner,
            userScrollEnabled = innerScrollAllowed,
            modifier = Modifier
                .pointerInput(Unit) {
                    detectHorizontalDragGestures(
                        onDragStart = { touchOffset ->
                            val isNearInnerEdge = touchOffset.x <= edgeSlop || touchOffset.x >= size.width - edgeSlop
                            setInnerScrollAllowed(!isNearInnerEdge)
                        },
                        onDragEnd = {
                            setInnerScrollAllowed(true)
                        }
                    )
                }
        ) { pageInner ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Gray),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "this inner ${pageInner}")
            }
        }
    } else {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Blue),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(text = "this out ${pageOut}")
        }
    }
}

方法二：直接消费边缘的拖动事件 #

如果觉得方法一的状态切换有点生硬，还可以直接拦截边缘的水平拖动事件，不让它们传递给Pager，这样Pager完全不会感知到边缘的滑动操作：

HorizontalPager(
    state = pagerState,
    userScrollEnabled = true,
    modifier = Modifier
        .pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    val event = awaitPointerEvent()
                    val firstChange = event.changes.firstOrNull() ?: continue
                    val touchX = firstChange.position.x
                    // 判断是否在边缘区域，且是水平拖动事件
                    val isEdgeDrag = (touchX <= edgeSlop || touchX >= size.width - edgeSlop) &&
                            event.type == PointerEventType.Drag
                    if (isEdgeDrag) {
                        // 消费这个事件，不让Pager处理
                        firstChange.consume()
                    }
                }
            }
        }
) { pageOut ->
    // 你的原有页面内容...
}

小提醒 #

内层Pager如果是全屏展示的，一定要给它也加上同样的处理，否则在滑动内层Pager的边缘时，还是会出现和系统手势冲突的问题。

这样修改后，系统的边缘返回手势和Pager的滚动操作就不会再打架了，用户体验会顺畅很多。

内容来源于stack exchange