Compose MD3：修改Elevated Button颜色时如何保留阴影？

在MD3中，ElevatedButton的默认阴影是基于容器颜色的色调变体自动生成的。当你使用深色自定义色（比如你用的Color(0xFFC34E69)）时，生成的阴影颜色与背景对比度极低，导致视觉上看起来“消失”了，而浅色因为对比度足够，阴影能正常显示。

以下是几种可行的解决方法：

1. 直接指定阴影颜色 #

通过ButtonDefaults.buttonElevation的shadowColor参数，手动设置阴影的颜色和透明度，让深色按钮的阴影更突出：

@Composable
fun PrimaryButton(
    modifier: Modifier = Modifier,
    @StringRes text: Int,
    onClick: () -> Unit
) {
    ElevatedButton(
        onClick = onClick,
        elevation = ButtonDefaults.buttonElevation(
            defaultElevation = 2.dp,
            pressedElevation = 2.dp,
            focusedElevation = 2.dp,
            hoveredElevation = 2.dp,
            disabledElevation = 0.dp,
            // 自定义阴影颜色，用半透明灰色增强对比度
            shadowColor = Color.Black.copy(alpha = 0.2f)
        ),
        colors = ButtonDefaults.elevatedButtonColors(
            containerColor = Color(0xFFC34E69)
        ),
        modifier = modifier
    ) {
        Text(
            text = stringResource(text),
            style = MaterialTheme.typography.titleMedium,
            color = Color.White
        )
    }
}

2. 提升阴影高度+自定义颜色 #

如果单纯调颜色不够，可以同时增大defaultElevation的值，配合阴影颜色，让阴影更明显：

elevation = ButtonDefaults.buttonElevation(
    defaultElevation = 4.dp, // 提升阴影高度
    pressedElevation = 4.dp,
    focusedElevation = 4.dp,
    hoveredElevation = 4.dp,
    disabledElevation = 0.dp,
    shadowColor = Color.Black.copy(alpha = 0.25f)
),

3. 使用自定义Shadow修饰符替代默认阴影 #

如果MD3的默认阴影机制不满足需求，可以直接给按钮添加shadow修饰符，完全自定义阴影的参数：

@Composable
fun PrimaryButton(
    modifier: Modifier = Modifier,
    @StringRes text: Int,
    onClick: () -> Unit
) {
    ElevatedButton(
        onClick = onClick,
        // 禁用默认elevation，避免双重阴影
        elevation = ButtonDefaults.buttonElevation(defaultElevation = 0.dp),
        colors = ButtonDefaults.elevatedButtonColors(
            containerColor = Color(0xFFC34E69)
        ),
        // 添加自定义阴影修饰符
        modifier = modifier.shadow(
            elevation = 2.dp,
            spotColor = Color.Black.copy(alpha = 0.2f),
            ambientColor = Color.Black.copy(alpha = 0.1f),
            shape = MaterialTheme.shapes.medium // 保持按钮的圆角一致
        )
    ) {
        Text(
            text = stringResource(text),
            style = MaterialTheme.typography.titleMedium,
            color = Color.White
        )
    }
}

注意：使用自定义shadow修饰符时，要把默认的elevation设为0，避免出现双重阴影。

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