自定义Modifier重构后detectTransformGestures重复触发zoom=1f手势问题

问题描述 #

将捏合缩放功能重构为自定义Modifier后，PointerInputScope.detectTransformGestures的onGesture回调会触发两次：第一次是正常缩放操作（zoom≠1f），第二次是无缩放的空手势（zoom=1f），导致第一次的缩放效果被直接抵消。原代码功能正常，重构后出现异常。

原代码（功能正常） #

@Composable
fun ZoomableImage(modifier: Modifier, painter: Painter) {
    val scale = remember { mutableStateOf(1f) }
    val rotationState = remember { mutableStateOf(0f) }
    val offsetX = remember { mutableStateOf(1f) }
    val offsetY = remember { mutableStateOf(1f) }

    Box(
        modifier = Modifier
            .combinedClickable(
                interactionSource = remember { MutableInteractionSource() },
                onClick = {}
            )
            .pointerInput(Unit) {
                detectTransformGestures { _, pan, zoom, rotation ->
                    scale.value *= zoom
                    if (scale.value > 1) {
                        offsetX.value += pan.x
                        offsetY.value += pan.y
                        rotationState.value += rotation
                    } else {
                        scale.value = 1f
                        offsetX.value = 1f
                        offsetY.value = 1f
                        rotationState.value = 0f
                    }
                }
            }
    ) {
        Image(painter = painter, contentDescription = null)
    }
}

重构后异常代码 #

@Composable
fun ZoomableImage(modifier: Modifier, painter: Painter) {
    var scale by remember { mutableStateOf(1f) }
    var rotationState by remember { mutableStateOf(0f) }
    var offsetX by remember { mutableStateOf(1f) }
    var offsetY by remember { mutableStateOf(1f) }
    
    Box(
        modifier = Modifier
            .zoomable(
                scale,
                { scale = it },
                offsetX,
                { offsetX = it },
                offsetY,
                { offsetY = it },
                rotationState,
                { rotationState = it },
            )
    ) {
        Image(painter = painter, contentDescription = null)
    }
}

fun Modifier.zoomable(
    scale: Float,
    setScale: (Float) -> Unit,
    offsetX: Float,
    setOffsetX: (Float) -> Unit,
    offsetY: Float,
    setOffsetY: (Float) -> Unit,
    rotationState: Float,
    setRotation: (Float) -> Unit,
) = composed {
    combinedClickable {
        interactionSource = remember { MutableInteractionSource() }
    }
    .pointerInput(Unit) {
        detectTransformGestures { _, pan, zoom, rotation ->
            val s = scale * zoom
            setScale(s)
            if (s > 1) {
                val panX = offsetX + pan.x
                setOffsetX(panX)
                val panY = offsetY + pan.y
                setOffsetY(panY)
                val r = rotationState + rotation
                setRotation(r)
            } else { 
                // 缩放后会触发此块，抵消之前的缩放效果
                setScale(1f)
                setOffsetX(1f)
                setOffsetY(1f)
                setRotation(0f)
            }
        }
    }
}

问题原因 #

1. combinedClickable写法错误：重构后的combinedClickable未正确传入interactionSource参数，而是在onClick Lambda内无效赋值，导致交互逻辑混乱，与pointerInput的手势检测产生冲突，触发额外的空手势回调。
2. pointerInput的Key未关联依赖状态：使用Unit作为pointerInput的Key，当外部缩放、偏移等状态更新时，composed块重组会导致pointerInput协程重启，触发收尾的空手势（zoom=1f）。
3. 未过滤空手势：detectTransformGestures在手势结束时会自动触发一次无变化的回调（zoom=1f、pan=Offset.Zero、rotation=0f），重构后的代码未对这种情况做过滤，导致错误进入重置逻辑。

修复方案 #

修复后的自定义Modifier代码 #

@Composable
fun ZoomableImage(modifier: Modifier, painter: Painter) {
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offsetX by remember { mutableStateOf(1f) }
    var offsetY by remember { mutableStateOf(1f) }
    val interactionSource = remember { MutableInteractionSource() }
    
    Box(
        modifier = modifier
            .zoomable(
                interactionSource = interactionSource,
                scale = scale,
                onScaleChange = { scale = it },
                offsetX = offsetX,
                onOffsetXChange = { offsetX = it },
                offsetY = offsetY,
                onOffsetYChange = { offsetY = it },
                rotation = rotation,
                onRotationChange = { rotation = it }
            )
    ) {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier
                .scale(scale)
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .rotate(rotation)
        )
    }
}

fun Modifier.zoomable(
    interactionSource: InteractionSource,
    scale: Float,
    onScaleChange: (Float) -> Unit,
    offsetX: Float,
    onOffsetXChange: (Float) -> Unit,
    offsetY: Float,
    onOffsetYChange: (Float) -> Unit,
    rotation: Float,
    onRotationChange: (Float) -> Unit,
) = composed {
    this
        .combinedClickable(
            interactionSource = interactionSource,
            onClick = {}
        )
        .pointerInput(scale, offsetX, offsetY, rotation) {
            detectTransformGestures { _, pan, zoom, rotationDelta ->
                // 过滤无变化的收尾手势
                if (zoom == 1f && pan == Offset.Zero && rotationDelta == 0f) {
                    return@detectTransformGestures
                }
                
                val newScale = scale * zoom
                onScaleChange(newScale)
                
                if (newScale > 1) {
                    onOffsetXChange(offsetX + pan.x)
                    onOffsetYChange(offsetY + pan.y)
                    onRotationChange(rotation + rotationDelta)
                } else {
                    onScaleChange(1f)
                    onOffsetXChange(1f)
                    onOffsetYChange(1f)
                    onRotationChange(0f)
                }
            }
        }
}

修复要点 #

• 修正combinedClickable实现：统一在父Composable中创建interactionSource并传入，避免交互源频繁重建导致的冲突。
• 关联pointerInput的依赖状态：将缩放、偏移、旋转状态作为pointerInput的Key，确保协程仅在必要时重启，减少无效回调。
• 过滤空手势：在回调开头判断无变化的手势，直接跳过处理，避免触发错误的状态重置逻辑。
• 规范参数命名：使用onXXXChange的回调命名，符合Jetpack Compose的编码规范，提升代码可读性。

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