Jetpack Compose中为带圆角卡片添加半部分边框的实现问题

一、顶部圆角U型边框（仅上半部分有边框） #

简易实现方案 #

利用Card的裁剪特性，给内部容器设置完整的顶部圆角边框，再通过padding隐藏底部边框：

val topCornerRadius = 10.dp
Card(
    shape = RoundedCornerShape(topStart = topCornerRadius, topEnd = topCornerRadius),
    elevation = 0.dp, // 不需要阴影可去掉，避免影响边框显示
    modifier = Modifier
) {
    Box(
        modifier = Modifier
            .border(
                width = 1.dp,
                color = Color.Black,
                shape = RoundedCornerShape(topStart = topCornerRadius, topEnd = topCornerRadius)
            )
            .padding(bottom = 1.dp) // 将底部边框移出Card可视范围，被裁剪隐藏
    ) {
        // 卡片内容
        Text(text = "U型边框卡片", modifier = Modifier.padding(16.dp))
    }
}

自定义Shape实现（精确控制） #

如果需要更精确的边框路径，可自定义Shape匹配Card的圆角：

@Composable
fun TopRoundedUBorderShape(cornerRadius: Dp): Shape {
    val cornerRadiusPx = with(LocalDensity.current) { cornerRadius.toPx() }
    val borderWidth = 1.dp.toPx()
    return GenericShape { size, _ ->
        // 绘制U型边框的外轮廓与内轮廓，匹配顶部圆角
        moveTo(cornerRadiusPx, 0f)
        lineTo(size.width - cornerRadiusPx, 0f)
        // 右上角外圆角
        arcTo(
            rect = Rect(
                left = size.width - 2 * cornerRadiusPx,
                top = 0f,
                right = size.width,
                bottom = 2 * cornerRadiusPx
            ),
            startAngleDegrees = 270f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(size.width, size.height - borderWidth)
        lineTo(size.width - borderWidth, size.height - borderWidth)
        lineTo(size.width - borderWidth, cornerRadiusPx + borderWidth)
        // 右上角内圆角
        arcTo(
            rect = Rect(
                left = size.width - 2 * cornerRadiusPx - borderWidth,
                top = borderWidth,
                right = size.width - borderWidth,
                bottom = 2 * cornerRadiusPx + borderWidth
            ),
            startAngleDegrees = 0f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(cornerRadiusPx + borderWidth, borderWidth)
        // 左上角内圆角
        arcTo(
            rect = Rect(
                left = borderWidth,
                top = borderWidth,
                right = 2 * cornerRadiusPx + borderWidth,
                bottom = 2 * cornerRadiusPx + borderWidth
            ),
            startAngleDegrees = 90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(borderWidth, size.height - borderWidth)
        lineTo(0f, size.height - borderWidth)
        lineTo(0f, cornerRadiusPx)
        // 左上角外圆角
        arcTo(
            rect = Rect(0f, 0f, 2 * cornerRadiusPx, 2 * cornerRadiusPx),
            startAngleDegrees = 180f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        close()
    }
}

使用方式：

val cornerRadius = 10.dp
Card(
    shape = RoundedCornerShape(topStart = cornerRadius, topEnd = cornerRadius),
    modifier = Modifier
        .border(
            border = BorderStroke(1.dp, Color.Black),
            shape = TopRoundedUBorderShape(cornerRadius)
        ),
    elevation = 0.dp
) {
    Text(text = "U型边框卡片", modifier = Modifier.padding(16.dp))
}

二、底部圆角倒U型边框（仅下半部分有边框） #

简易实现方案 #

同理，通过内部容器padding隐藏顶部边框：

val bottomCornerRadius = 10.dp
Card(
    shape = RoundedCornerShape(bottomStart = bottomCornerRadius, bottomEnd = bottomCornerRadius),
    elevation = 0.dp,
    modifier = Modifier
) {
    Box(
        modifier = Modifier
            .border(
                width = 1.dp,
                color = Color.Black,
                shape = RoundedCornerShape(bottomStart = bottomCornerRadius, bottomEnd = bottomCornerRadius)
            )
            .padding(top = 1.dp) // 隐藏顶部边框
    ) {
        Text(text = "倒U型边框卡片", modifier = Modifier.padding(16.dp))
    }
}

自定义Shape实现 #

@Composable
fun BottomRoundedInverseUBorderShape(cornerRadius: Dp): Shape {
    val cornerRadiusPx = with(LocalDensity.current) { cornerRadius.toPx() }
    val borderWidth = 1.dp.toPx()
    return GenericShape { size, _ ->
        moveTo(0f, size.height - cornerRadiusPx)
        lineTo(size.width, size.height - cornerRadiusPx)
        // 右下角外圆角
        arcTo(
            rect = Rect(
                left = size.width - 2 * cornerRadiusPx,
                top = size.height - 2 * cornerRadiusPx,
                right = size.width,
                bottom = size.height
            ),
            startAngleDegrees = 90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(size.width, borderWidth)
        lineTo(size.width - borderWidth, borderWidth)
        lineTo(size.width - borderWidth, size.height - cornerRadiusPx - borderWidth)
        // 右下角内圆角
        arcTo(
            rect = Rect(
                left = size.width - 2 * cornerRadiusPx - borderWidth,
                top = size.height - 2 * cornerRadiusPx - borderWidth,
                right = size.width - borderWidth,
                bottom = size.height - borderWidth
            ),
            startAngleDegrees = 180f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(cornerRadiusPx + borderWidth, size.height - borderWidth)
        // 左下角内圆角
        arcTo(
            rect = Rect(
                left = borderWidth,
                top = size.height - 2 * cornerRadiusPx - borderWidth,
                right = 2 * cornerRadiusPx + borderWidth,
                bottom = size.height - borderWidth
            ),
            startAngleDegrees = 270f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(borderWidth, borderWidth)
        lineTo(0f, borderWidth)
        lineTo(0f, size.height - cornerRadiusPx)
        // 左下角外圆角
        arcTo(
            rect = Rect(
                left = 0f,
                top = size.height - 2 * cornerRadiusPx,
                right = 2 * cornerRadiusPx,
                bottom = size.height
            ),
            startAngleDegrees = 0f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        close()
    }
}

使用方式：

val cornerRadius = 10.dp
Card(
    shape = RoundedCornerShape(bottomStart = cornerRadius, bottomEnd = cornerRadius),
    modifier = Modifier
        .border(
            border = BorderStroke(1.dp, Color.Black),
            shape = BottomRoundedInverseUBorderShape(cornerRadius)
        ),
    elevation = 0.dp
) {
    Text(text = "倒U型边框卡片", modifier = Modifier.padding(16.dp))
}

问题说明 #

你之前的自定义Shape仅绘制了简单的矩形边，完全没有匹配Card的圆角弧度，导致边框和卡片圆角无法贴合。上面的方案要么利用Card的裁剪特性快速实现，要么通过arcTo绘制和Card一致的圆角路径，确保边框与卡片形状匹配。

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