Jetpack Compose中如何让Card内内容适配卡片圆角裁剪？

方案1：利用clipInset动态适配Card的Shape #

这个方法最通用，不管Card用默认Shape还是自定义Shape，都能通过inset参数抵消padding的影响，让内部背景的裁剪和Card完全匹配：

@Composable
fun PreviewWindow() {
    val cardShape = CardDefaults.shape
    Card(shape = cardShape) {
        Column(
            modifier = Modifier
                .padding(2.dp)
                // inset值和padding一致，直接复用Card的Shape
                .clipInset(shape = cardShape, inset = 2.dp)
                .background(Color.Blue)
                .width(200.dp)
                .aspectRatio(1F)
        ) { }
    }
}

方案2：通过强转Shape获取圆角半径（仅适用于圆角Shape） #

如果确定Card用的是RoundedCornerShape（默认就是），可以强转后获取原始圆角半径，减去padding值得到内部裁剪的半径：

@Composable
fun PreviewWindow() {
    val cardShape = CardDefaults.shape
    // 动态计算内部裁剪的圆角半径
    val innerClipShape = if (cardShape is RoundedCornerShape) {
        RoundedCornerShape(
            topStart = cardShape.topStart - 2.dp,
            topEnd = cardShape.topEnd - 2.dp,
            bottomEnd = cardShape.bottomEnd - 2.dp,
            bottomStart = cardShape.bottomStart - 2.dp
        )
    } else {
        // 非圆角Shape直接复用
        cardShape
    }

    Card(shape = cardShape) {
        Column(
            modifier = Modifier
                .padding(2.dp)
                .clip(innerClipShape)
                .background(Color.Blue)
                .width(200.dp)
                .aspectRatio(1F)
        ) { }
    }
}

方案3：用Surface继承父级Shape #

利用Compose的LocalContentShape，让内部Surface自动继承Card的Shape，同时用Surface的背景代替Column的background：

@Composable
fun PreviewWindow() {
    Card {
        Surface(
            modifier = Modifier
                .padding(2.dp)
                .width(200.dp)
                .aspectRatio(1F),
            color = Color.Blue,
            // 自动继承父级Card的Shape
            shape = LocalContentShape.current
        ) {
            Column { }
        }
    }
}

方案4：调整padding的位置（最简单的布局调整） #

如果布局允许，把Column的padding移到Card上，让Card的裁剪直接作用于背景区域：

@Composable
fun PreviewWindow() {
    Card(
        modifier = Modifier.padding(2.dp)
    ) {
        Column(
            modifier = Modifier
                .background(Color.Blue)
                .width(200.dp)
                .aspectRatio(1F)
        ) { }
    }
}

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