Android Jetpack Compose：如何让多触控操作仅限制在Box组件内

要让蓝色方块仅在灰色Box范围内执行拖拽、缩放、旋转操作，核心是对变换后的位置和尺寸做边界限制，避免超出父容器。以下是修改后的完整代码及关键说明：

修改后的代码 #

@Composable
private fun TransformableSample() {
    // 初始化变换状态
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    val initialOffsetX = with(LocalDensity.current) { 20.dp.toPx() }
    var offset by remember { mutableStateOf(Offset(initialOffsetX, 0f)) }
    // 记录父容器（灰色Box）的尺寸
    var parentSize by remember { mutableStateOf(Size.Zero) }

    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        val newScale = scale * zoomChange
        val newRotation = rotation + rotationChange
        // 计算蓝色方块缩放后的实际像素尺寸
        val squareSize = with(LocalDensity.current) { 120.dp.toPx() } * newScale

        // 计算偏移量的合法范围，确保方块不超出父容器
        val maxOffsetX = (parentSize.width - squareSize).coerceAtLeast(0f)
        val maxOffsetY = (parentSize.height - squareSize).coerceAtLeast(0f)

        // 限制偏移量在合法区间内
        val newOffsetX = (offset.x + offsetChange.x).coerceIn(0f, maxOffsetX)
        val newOffsetY = (offset.y + offsetChange.y).coerceIn(0f, maxOffsetY)

        scale = newScale
        rotation = newRotation
        offset = Offset(newOffsetX, newOffsetY)
    }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "MultiTouch Zoom Preview", fontSize = 26.sp)
        Spacer(modifier = Modifier.height(25.dp))
        Box(
            modifier = Modifier
                .background(Color.DarkGray)
                .height(200.dp)
                .width(350.dp)
                .onSizeChanged { parentSize = it } // 获取父容器实时尺寸
        ) {
            Box(
                Modifier
                    .graphicsLayer(
                        scaleX = scale,
                        scaleY = scale,
                        rotationZ = rotation,
                        translationX = offset.x,
                        translationY = offset.y
                    )
                    .transformable(state = state)
                    .background(Color.Blue)
                    .size(120.dp)
            )
        }
    }
}

关键修改说明 #

• 监听父容器尺寸：通过onSizeChanged获取灰色Box的实时尺寸，后续边界计算依赖该值。
• 统一位置控制：将原代码中padding(start=20.dp)替换为初始偏移量设置，所有位置变化由translationX/Y统一控制，避免计算混乱。
• 边界限制逻辑：
  1. 计算缩放后蓝色方块的实际像素尺寸。
  2. 算出X/Y轴允许的最大偏移量（父容器尺寸减去方块尺寸，确保方块能完全放入父容器），用coerceAtLeast(0f)处理缩放后方块大于父容器的情况（此时偏移量锁定为0）。
  3. 用coerceIn将新偏移量限制在合法区间内，保证方块的边缘不会超出灰色Box的范围。

关于旋转的补充说明 #

如果需要支持旋转且严格限制方块不超出父容器，边界计算会更复杂（旋转后方块的外接矩形会变大）。此时可以通过Rect和Matrix计算旋转后的外接矩形，再判断是否与父容器边界碰撞，进一步调整偏移量。上述代码为基础版本，优先保证拖拽、缩放的边界限制。

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