Android compose Card 使用半透明颜色时有边框

Question

当背景颜色具有一定透明度时， Android Jetpack composeCard会在卡片周围绘制边框。这是它在 AS 中的样子：

但这是它在应用程序中的样子：

如果我将背景设置为纯色，它就可以工作，但默认情况下backgroundColor是来自材质的表面颜色（在我的应用程序中val white850 = Color(0xD9FFFFFF)），它看起来像上图所示。

@Composable
fun TraitCard(trait: Trait) {
    Card(
        shape = MaterialTheme.shapes.small,
        modifier = Modifier.size(width = 192.dp, height = 56.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Start
        ) {
            Icon(
                imageVector = Icons.Rounded.ChildFriendly,
                contentDescription = "",
                modifier = Modifier
                    .fillMaxHeight()
                    .background(color = MaterialTheme.colors.background)
                    .aspectRatio(1f)
                    .padding(8.dp),
                tint = MaterialTheme.colors.onBackground
            )
            Text(
                text = trait.name,
                style = MaterialTheme.typography.h3,
                modifier = Modifier.padding(horizontal = 16.dp),
            )
        }
    }
}

有谁知道为什么会发生这种情况？

Answer 1

这是因为Card默认情况下具有的标高（以及阴影的绘制方式），如果删除标高，则不会发生这种情况。

您可以尝试使用以下命令将半透明颜色转换为非透明颜色：

backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White),