如何在Android Jetpack Compose中实现卡片重叠并让下方卡片倾斜

问题原因 #

1. 两张卡片使用了完全相同的offset参数，导致后绘制的Card2完全覆盖Card1，无法看到Card1。
2. 没有添加倾斜变换，无法体现Card2在Card1下方的层级关系。
3. Box组件的绘制顺序是后添加的Composable在视觉上层，当前代码中Card2在Card1之后添加，默认处于Card1上方，和需求的“Card2在下方”相反。

修正后的代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            OverlappingCardsTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    OverlappingCards()
                }
            }
        }
    }
}

@Composable
fun OverlappingCards(){
    Box(modifier = Modifier.fillMaxSize()){
        // 先绘制Card2，确保它在视觉下层
        Card(
            modifier = Modifier
                .size(200.dp, 300.dp)
                .offset(60.dp, 60.dp) // 偏移量大于Card1，露出部分区域
                .rotate(5f), // 添加倾斜效果，提示层级
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp) // 降低阴影，强化下层感知
        ) {
            Text(text = "Hello Card2")
        }

        // 后绘制Card1，覆盖在Card2上方
        Card(
            modifier = Modifier
                .size(200.dp, 300.dp)
                .offset(40.dp, 40.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 10.dp)
        ) {
            Text(text = "Hello Card1")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    OverlappingCardsTheme {
        OverlappingCards() // 预览中添加组件，才能看到效果
    }
}

关键修改说明 #

• 调整绘制顺序：将Card2放在Card1之前，利用Box的绘制规则让Card2处于下层。
• 添加倾斜效果：通过rotate(5f)给Card2设置小角度旋转，直观提示它在Card1下方。
• 偏移量差异化：让Card2的offset比Card1大，露出部分区域，避免完全被覆盖。
• 阴影层级优化：降低Card2的elevation，让阴影更浅，和上层Card1的深阴影形成对比，增强层级感。
• 修复预览问题：原来的预览函数没有调用OverlappingCards()，现在添加后可以直接在预览中看到效果。

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