Jetpack Compose 中如何正确去除 Card 组件的边框？

Jetpack Compose Card组件去除边框/阴影解决方案 #

问题原因 #

你看到的类边框效果并非border属性绘制的边框，是Card组件默认携带的阴影（由elevation属性控制），你当前设置border为0dp透明的操作仅能隐藏显性边框，对默认阴影无效。

实现方法 #

根据你使用的依赖库版本，对应修改Card的elevation属性即可：

1. Material2版本Card

直接给elevation参数赋值0dp即可，多余的透明border配置可以删除：

Card(
    shape = RoundedCornerShape(0.dp),
    elevation = 0.dp, // 核心配置：取消阴影
    modifier = Modifier
        .height(100.dp)
        .padding(start = 10.dp, top = 40.dp, end = 10.dp)
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {
                submit()
            },
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 20.dp, top = 20.dp, bottom = 20.dp)
                .wrapContentWidth(Alignment.Start),
            text = "Submit",
            style = typography.h4,
        )
    }
}

2. Material3版本Card

elevation需要通过CardDefaults.cardElevation指定所有交互状态下的阴影值都为0dp：

Card(
    shape = RoundedCornerShape(0.dp),
    elevation = CardDefaults.cardElevation(
        defaultElevation = 0.dp,
        pressedElevation = 0.dp,
        focusedElevation = 0.dp,
        hoveredElevation = 0.dp,
        draggedElevation = 0.dp,
        disabledElevation = 0.dp
    ),
    modifier = Modifier
        .height(100.dp)
        .padding(start = 10.dp, top = 40.dp, end = 10.dp)
) {
    // 内部内容保持不变
}

如果修改后仍有边框残留，可额外给Card设置border = null，覆盖主题默认的border配置。

内容的提问来源于stack exchange，提问作者Muhammad Zaryab Rafique