嘿，我刚好做过类似的需求，给你整理了完整的实现代码，还会帮你拆解关键逻辑，保证你能轻松搞定这个可拖拽+可旋转的Box组件！

完整实现代码 #

@Composable
fun DragRotateBox() {
    // 保存旋转角度和位置偏移的状态
    var rotation by remember { mutableStateOf(0f) }
    var position by remember { mutableStateOf(Offset.Zero) }

    val boxSize = 100.dp
    val handleSize = 20.dp

    // 将dp转换为像素值，方便坐标计算
    val boxSizePx = with(LocalDensity.current) { boxSize.toPx() }
    val handleSizePx = with(LocalDensity.current) { handleSize.toPx() }
    
    // Box自身的中心坐标（相对于左上角）
    val boxCenter = Offset(boxSizePx / 2, boxSizePx / 2)

    Box(
        modifier = Modifier
            // 应用旋转和位移效果
            .graphicsLayer(
                rotationZ = rotation,
                translationX = position.x,
                translationY = position.y
            )
            .background(Color.Blue)
            .size(boxSize)
            .pointerInput(Unit) {
                // 记录拖拽开始时的初始状态
                var initialRotation = 0f
                var initialTouchAngle = 0f

                detectDragGestures(
                    onDragStart = { touchOffset ->
                        // 保存当前的旋转角度和触摸点的初始角度
                        initialRotation = rotation
                        val localTouch = touchOffset - position - boxCenter
                        initialTouchAngle = atan2(localTouch.y, localTouch.x) * (180f / Math.PI).toFloat()
                    },
                    onDrag = { change, dragAmount ->
                        change.consume()

                        // 将屏幕触摸坐标转换为Box中心的局部坐标（排除位移影响）
                        val localTouch = change.position - position - boxCenter
                        // 计算当前触摸点相对于Box中心的角度
                        val currentTouchAngle = atan2(localTouch.y, localTouch.x) * (180f / Math.PI).toFloat()

                        // 逆旋转触摸点，判断是否点击到顶部手柄（因为Box旋转后手柄位置会跟着转）
                        val rotatedLocalTouch = localTouch.rotate(-rotation) + boxCenter
                        val isTouchingHandle = rotatedLocalTouch.x in (boxCenter.x - handleSizePx/2)..(boxCenter.x + handleSizePx/2) &&
                                rotatedLocalTouch.y in 0f..handleSizePx

                        if (isTouchingHandle) {
                            // 拖拽手柄时，根据角度变化更新旋转值
                            rotation = initialRotation + (currentTouchAngle - initialTouchAngle)
                        } else {
                            // 拖拽Box主体时，直接更新位置偏移
                            position += dragAmount
                        }
                    }
                )
            }
    ) {
        // 顶部中心的旋转手柄
        Box(
            modifier = Modifier
                .size(handleSize)
                .background(Color.Red)
                .align(Alignment.TopCenter)
        )
    }
}

关键逻辑拆解 #

1. 状态管理：用remember包裹mutableStateOf来保存rotation和position，确保这些状态在Compose重组时不会丢失，是实现交互的基础。
2. 坐标转换：因为Box有旋转和位移，所以必须把屏幕上的触摸坐标转换为Box的局部坐标，还要通过rotate(-rotation)逆旋转触摸点，才能准确判断是否点击到了顶部的手柄（毕竟手柄是跟着Box一起旋转的）。
3. 两种拖拽逻辑区分：
   • 旋转逻辑：当检测到触摸点在红色手柄区域时，计算触摸点相对于Box中心的角度变化，用初始旋转角度加上这个变化量，就能实现绕中心旋转的效果。
   • 移动逻辑：如果触摸的是Box主体，直接把拖拽偏移量加到position上，就能让整个Box跟着手指移动。
4. 手柄布局：通过align(Alignment.TopCenter)直接把红色手柄定位在Box的顶部中心，简单又直观。

小优化建议 #

• 可以给手柄加个圆角或者阴影，让它看起来更像可交互的控件。
• 如果需要限制Box不能拖出屏幕，可以在更新position时加上边界判断，比如获取屏幕尺寸后，确保Box的边缘不超出屏幕范围。

备注：内容来源于stack exchange，提问作者Abdo21