Jetpack Compose 配置阴影的禁用按钮出现渲染异常问题

按钮中间出现方块异常是手动添加的外层shadow修饰符和Button内置渲染逻辑冲突导致：

• Button组件自带随enabled状态自动适配的阴影渲染能力，外层独立添加的.shadow()修饰符不会感知组件的禁用状态
• 禁用状态下按钮背景为半透明，外层shadow无法和组件内部的形状裁剪、状态渲染逻辑同步，就会透出方块状渲染伪影。

移除Modifier上手动添加的.shadow()调用，直接使用Button组件提供的elevation参数配置阴影即可。官方内置的阴影实现会自动适配启用/禁用状态下的透明度、形状裁剪逻辑，不会出现渲染异常。

修正后代码：

@Composable
fun PrimaryButton(
    modifier: Modifier = Modifier,
    enabled: Boolean = false,
    text: String,
    onClick: () -> Unit,
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .height(44.dp)
            .then(modifier),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Style.colors.buttonPrimary,
            disabledBackgroundColor = Style.colors.buttonPrimary.copy(0.4f),
        ),
        shape = RoundedCornerShape(22.dp),
        enabled = enabled,
        elevation = ButtonDefaults.buttonElevation(
            defaultElevation = 4.dp,
            disabledElevation = 4.dp // 按需调整禁用状态下的阴影高度，不需要阴影可设为0.dp
        )
    ) {
        Text(
            text = text,
            style = Style.typography.phoenixTitle,
            color = Color.White
        )
    }
}

异常效果示意：

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