Jetpack Compose中解决Horizontal Pager与缩放图片手势冲突

问题背景 #

在Horizontal Pager中实现了支持双击缩放、变换手势的图片组件，但图片区域无法滑动切换Pager页面，推测是图片平移手势与Pager的滚动手势冲突。尝试阻止图片水平平移后，仍未解决Pager滚动问题。

解决方案 #

核心是让手势系统根据图片状态决定手势归属：

• 当图片未缩放（缩放比例为1）时，水平拖拽直接交由Pager处理
• 当图片已缩放时，仅在图片拖拽到水平边界后，才允许Pager响应滚动
• 合并手势检测逻辑，统一控制事件消费，避免多个pointerInput的优先级冲突

修改后的可缩放图片组件代码 #

@Composable
fun DoubleTapZoom() {
    var zoomed by remember { mutableStateOf(false) }
    var transforming by remember { mutableStateOf(false) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    var zoomFloat by remember { mutableStateOf(1f) }
    var angle by remember { mutableStateOf(0f) }

    // 记录容器与图片尺寸，用于计算平移边界
    val containerSize = remember { mutableStateOf(IntSize.Zero) }
    val imageSize = remember { mutableStateOf(IntSize.Zero) }

    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = null,
        modifier = Modifier
            .size(500.dp)
            .background(Color.Red)
            .onSizeChanged { containerSize.value = it }
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent()
                        when (event.type) {
                            PointerEventType.Press -> {
                                // 优先处理双击手势
                                val tapHandled = detectTapGestures(
                                    onDoubleTap = { tapOffset ->
                                        offset = if (zoomed) Offset.Zero else
                                            calculateOffsetFromClick(containerSize.value, tapOffset)
                                        zoomed = !zoomed
                                        zoomFloat = if (zoomed) 2f else 1f
                                    }
                                ).await()
                                if (tapHandled != null) continue
                                
                                // 处理变换手势（平移、缩放、旋转）
                                detectTransformGestures(
                                    onGestureStart = { transforming = true },
                                    onGestureEnd = { transforming = false }
                                ) { centroid, pan, gestureZoom, gestureRotate ->
                                    val oldScale = zoomFloat
                                    val newScale = zoomFloat * gestureZoom.coerceIn(1f..3f) // 限制缩放范围
                                    
                                    // 计算平移后的临时偏移
                                    val tempOffset = (offset + centroid / oldScale).rotateBy(gestureRotate) -
                                            (centroid / newScale + pan / oldScale)
                                    
                                    // 计算水平方向可平移的边界
                                    val maxXOffset = (imageSize.value.width * newScale - containerSize.value.width) / 2f / newScale
                                    val minXOffset = -maxXOffset
                                    val clampedX = tempOffset.x.coerceIn(minXOffset, maxXOffset)
                                    
                                    // 判断是否消费水平拖拽事件：已到边界则不消费，让Pager处理滚动
                                    val shouldConsumeHorizontalDrag = 
                                        !(pan.x > 0 && tempOffset.x >= maxXOffset || pan.x < 0 && tempOffset.x <= minXOffset)
                                    
                                    offset = if (shouldConsumeHorizontalDrag || zoomFloat == 1f) {
                                        tempOffset.copy(x = clampedX)
                                    } else {
                                        offset // 保持当前偏移，让Pager响应滚动
                                    }
                                    
                                    zoomFloat = newScale
                                    angle += gestureRotate
                                }
                            }
                            else -> awaitPointerEvent()
                        }
                    }
                }
            }
            .graphicsLayer {
                scaleX = zoomFloat
                scaleY = zoomFloat
                translationX = -offset.x * zoomFloat
                translationY = -offset.y * zoomFloat
                rotationZ = angle
                transformOrigin = TransformOrigin(0f, 0f)
            },
        onSizeChanged = { imageSize.value = it }
    )
}

// 辅助函数：计算双击后让点击位置居中的偏移量
private fun calculateOffsetFromClick(containerSize: IntSize, tapOffset: Offset): Offset {
    val containerCenter = Offset(containerSize.width / 2f, containerSize.height / 2f)
    return (tapOffset - containerCenter) / 2f
}

// 扩展函数：对偏移量应用旋转变换
private fun Offset.rotateBy(angle: Float): Offset {
    val radians = Math.toRadians(angle.toDouble()).toFloat()
    val cos = kotlin.math.cos(radians)
    val sin = kotlin.math.sin(radians)
    return Offset(
        x = x * cos - y * sin,
        y = x * sin + y * cos
    )
}

关键修改点说明 #

• 合并手势检测：用awaitPointerEventScope统一处理双击与变换手势，避免多个pointerInput的事件拦截冲突
• 边界判断：计算图片缩放后的水平可平移范围，拖拽到边界时不再消费事件，让Pager响应滚动
• 缩放范围限制：通过coerceIn(1f..3f)控制缩放比例，避免过度缩放导致逻辑混乱
• 手势状态跟踪：在变换手势的开始/结束时更新transforming状态，确保状态同步

Horizontal Pager使用代码（无需修改） #

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerWithZoomableContent() {
    val pagerState = rememberPagerState()
    
    HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .border(4.dp, Color.Red, RoundedCornerShape(36.dp))
            .clip(RoundedCornerShape(36.dp)),
        pageCount = 4,
    ) { pageIndex ->
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            DoubleTapZoom()
        }
    }
}

内容的提问来源于stack exchange，提问作者Sevban Bayır