Jetpack Compose实现卡片Y轴旋转且避免拉伸的方法

你的问题根源在于两点：一是卡片无明确尺寸约束，旋转时父布局会让它填充可用空间；二是默认cameraDistance过小，导致透视变形看起来像拉伸。以下是修复方案：

修复步骤 #

• 给Card添加明确尺寸约束，避免旋转时无限制拉伸
• 在graphicsLayer中增大cameraDistance，让透视效果更自然
• 优化旋转角度的边界处理，避免数值溢出

修改后的代码 #

var rotation by remember { mutableFloatStateOf(0f) }
Box(
    modifier = Modifier
        .padding(padding)
        .pointerInput(Unit) {
            detectHorizontalDragGestures { _, dragAmount ->
                rotation += dragAmount * 0.5f // 调整拖拽灵敏度，让旋转更顺滑
                // 保持角度在0-360范围内循环
                rotation = rotation.mod(360f)
            }
        },
    contentAlignment = Alignment.Center
) {
    Card(
        card = card,
        modifier = Modifier
            .size(width = 280.dp, height = 400.dp) // 固定卡片尺寸，可根据需求调整
            .graphicsLayer {
                rotationY = rotation
                // 增大相机距离，减弱透视变形，消除拉伸感
                cameraDistance = 8f * density.dpi
                // 显式声明旋转原点为卡片中心（默认值，可省略）
                transformOrigin = TransformOrigin.Center
            }
    )
}

关键说明 #

1. 固定卡片尺寸：通过size修饰符给Card设置明确宽高，确保旋转时卡片不会因父布局无约束而被拉伸至全屏。
2. 调整cameraDistance：默认cameraDistance值极小，Y轴旋转时会产生强烈透视变形，看起来像拉伸。设置8f * density.dpi能让旋转效果更自然。
3. 优化拖拽逻辑：给dragAmount乘系数调整旋转灵敏度，避免拖拽幅度小但旋转角度过大；用mod(360f)替代手动判断，简洁实现角度循环。

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