如何在Jetpack Compose中实现Material Design 3风格的现代Card组件

方案1：使用最新 Compose Material3 官方内置组件（推荐） #

升级你的 Compose Material3 依赖到 1.2.0 及以上版本，直接调用ElevatedCard组件即可，默认效果和你要的谷歌应用内卡片完全匹配：

ElevatedCard(
    modifier = Modifier.padding(16.dp),
    shape = RoundedCornerShape(16.dp), // 可根据需求调整圆角，谷歌官方常用12-16dp
    elevation = CardDefaults.elevatedCardElevation(
        defaultElevation = 2.dp // 低抬高值实现柔和阴影效果
    )
) {
    // 此处填写卡片内部内容
    Text(
        text = "示例内容",
        modifier = Modifier.padding(16.dp)
    )
}

该组件默认无任何边框，自带的阴影算法生成的效果就是你需要的轻微抬高+柔和阴影质感。

方案2：自定义 Modifier 实现（无需升级依赖） #

如果暂时无法升级 Compose Material3 版本，自行配置阴影参数也能实现相同效果，之前调试失败大概率是阴影抬高值和透明度没有匹配对：

Card(
    modifier = Modifier
        .padding(16.dp)
        .shadow(
            elevation = 2.dp,
            shape = RoundedCornerShape(16.dp),
            ambientColor = Color.Black.copy(alpha = 0.05f),
            spotColor = Color.Black.copy(alpha = 0.1f)
        ),
    shape = RoundedCornerShape(16.dp),
    border = null,
    backgroundColor = Color.White,
    elevation = 0.dp // 关闭Card自带默认抬高，使用自定义shadow的效果
) {
    // 此处填写卡片内部内容
}

效果调试注意事项 #

• 柔和阴影的核心是抬高值不超过3dp，抬高值越高阴影边缘越硬
• 暗色主题下将阴影的alpha值调低50%左右，效果更自然
• 圆角数值建议统一使用12/16dp，和谷歌官方设计规范对齐

内容的提问来源于stack exchange，提问作者Jared Bts.