僅底部有陰影的卡片元素

Question

我正在嘗試創建 Card 元素並僅在底部添加陰影，左右各有一點，頂部為零。

 Card(
    elevation = 10.dp,
    modifier = Modifier
        .background(color = seatfrogWhite, shape = RoundedCornerShape(4.dp))
        .graphicsLayer {
            this.shadowElevation = 10.dp.toPx()
            this.shape = RoundedCornerShape(4.dp)
            this.clip = true
        }
        .height(50.dp)
        .width(100.dp),
    shape = RoundedCornerShape(4.dp)
) {}

我試過使用shadow()修飾符，但沒有成功。 它總是在頂部添加陰影。

Answer 1

您可以使用 M3 ElevatedCard ：

ElevatedCard(
    Modifier.size(width = 180.dp, height = 50.dp),
    shape = RoundedCornerShape(4.dp),
    elevation = CardDefaults.elevatedCardElevation(8.dp),
    colors = CardDefaults.elevatedCardColors(containerColor = Teal200),
) {
    // Card content
}