Jetpack Compose中并排卡片的多余阴影去除方案

要解决两个Card组合后中间阴影重叠的问题，核心思路是让单个父容器提供整体的投影效果，内部的子组件只负责视觉形状和内容，不再单独设置elevation。这样系统就会把整个组合视为一个整体，不会出现重叠阴影。

具体修改方案 #

1. 用一个外层Card包裹整个Row，把原本给两个子Card的elevation移到这个外层Card上，作为整体的投影来源。
2. 移除两个子Card的elevation参数，避免各自生成阴影。
3. 调整子Card的形状和布局，确保它们紧密拼接，视觉上和原设计一致：
   • 左侧小Card保留左上、左下圆角
   • 右侧大Card保留右上、右下圆角
   • 确保两个Card之间没有间隙，通过布局对齐保证视觉连贯

修改后的完整代码 #

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBackIosNew
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun MenuExample() {
    // 外层Card提供统一的整体投影
    Card(
        elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
        shape = RoundedCornerShape(10.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.98f)
        )
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 左侧子Card：仅负责形状和按钮，无独立阴影
            Card(
                modifier = Modifier
                    .height(80.dp)
                    .width(40.dp),
                shape = RoundedCornerShape(topStart = 10.dp, bottomStart = 10.dp),
                colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.98f))
            ) {
                Button(
                    onClick = {},
                    modifier = Modifier
                        .height(80.dp)
                        .width(40.dp),
                    shape = RectangleShape,
                    contentPadding = PaddingValues(0.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.Transparent,
                        contentColor = Color.Black
                    )
                ) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBackIosNew,
                        contentDescription = null,
                        modifier = Modifier.size(22.dp)
                    )
                }
            }
            // 右侧子Card：仅负责形状，无独立阴影
            Card(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp),
                shape = RoundedCornerShape(topEnd = 10.dp, bottomEnd = 10.dp),
                colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.98f))
            ) {
                // 右侧内容区域
            }
        }
    }
}

@Preview
@Composable
fun MenuExamplePreview() {
    MenuExample()
}

额外说明 #

• 外层Card的圆角参数可以和子Card保持一致，确保整体视觉统一。
• 如果需要更复杂的自定义形状，可以通过Modifier.clip()结合自定义Shape实现，同样只在最外层容器设置elevation。
• 子Card的容器颜色要和外层保持一致，避免出现视觉断层。

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