Jetpack Compose绘制自定义边框：如何实现指定样式边框？

你说的思路方向是对的，但其实不需要用clipRect，直接通过drawWithContent在Canvas上绘制指定段的边框就能实现图中的效果。下面给出两种对应实现，你可以根据图中的样式选择：

1. 四边带对称缺口的边框 #

如果你的需求是上下左右边框的两端都有缺口（仅中间保留边框段），可以用这个实现：

@Composable
fun BorderedBox(
    modifier: Modifier = Modifier,
    borderColor: Color = Color.Black,
    borderWidth: Dp = 2.dp,
    gapSize: Dp = 20.dp, // 缺口长度，可按需调整
    content: @Composable () -> Unit
) {
    val borderWidthPx = borderWidth.toPx()
    val gapSizePx = gapSize.toPx()
    
    Box(
        modifier = modifier
            .drawWithContent {
                // 先绘制内部内容
                drawContent()
                
                val canvasWidth = size.width
                val canvasHeight = size.height
                
                // 顶部边框：左右各留gapSize的缺口
                drawLine(
                    color = borderColor,
                    start = Offset(gapSizePx, 0f),
                    end = Offset(canvasWidth - gapSizePx, 0f),
                    strokeWidth = borderWidthPx
                )
                
                // 底部边框：左右各留gapSize的缺口
                drawLine(
                    color = borderColor,
                    start = Offset(gapSizePx, canvasHeight),
                    end = Offset(canvasWidth - gapSizePx, canvasHeight),
                    strokeWidth = borderWidthPx
                )
                
                // 左侧边框：上下各留gapSize的缺口
                drawLine(
                    color = borderColor,
                    start = Offset(0f, gapSizePx),
                    end = Offset(0f, canvasHeight - gapSizePx),
                    strokeWidth = borderWidthPx
                )
                
                // 右侧边框：上下各留gapSize的缺口
                drawLine(
                    color = borderColor,
                    start = Offset(canvasWidth, gapSizePx),
                    end = Offset(canvasWidth, canvasHeight - gapSizePx),
                    strokeWidth = borderWidthPx
                )
            },
        contentAlignment = Alignment.Center
    ) {
        content()
    }
}

坐标参数说明 #

• 所有坐标基于当前Box的绘制区域：size.width是Box宽度，size.height是高度
• 顶部边框起始点x坐标为gapSizePx（跳过左侧缺口），y坐标为0（Box顶部边缘）；结束点x坐标为canvasWidth - gapSizePx（跳过右侧缺口），y坐标保持0
• 其余边框的坐标逻辑同理，仅需调整对应轴的起始/结束值即可

2. 仅四角保留短边框的样式 #

如果图中的边框是只有四个角各有一小段边框、中间无连接，可以用这个实现：

@Composable
fun CornerBorderBox(
    modifier: Modifier = Modifier,
    borderColor: Color = Color.Black,
    borderWidth: Dp = 2.dp,
    cornerSegmentLength: Dp = 20.dp, // 角上边框段的长度
    content: @Composable () -> Unit
) {
    val borderWidthPx = borderWidth.toPx()
    val segmentLengthPx = cornerSegmentLength.toPx()
    
    Box(
        modifier = modifier
            .drawWithContent {
                drawContent()
                val canvasWidth = size.width
                val canvasHeight = size.height
                
                // 左上角：水平向右 + 垂直向下的短边框
                drawLine(color = borderColor, start = Offset(0f, 0f), end = Offset(segmentLengthPx, 0f), strokeWidth = borderWidthPx)
                drawLine(color = borderColor, start = Offset(0f, 0f), end = Offset(0f, segmentLengthPx), strokeWidth = borderWidthPx)
                
                // 右上角：水平向左 + 垂直向下的短边框
                drawLine(color = borderColor, start = Offset(canvasWidth, 0f), end = Offset(canvasWidth - segmentLengthPx, 0f), strokeWidth = borderWidthPx)
                drawLine(color = borderColor, start = Offset(canvasWidth, 0f), end = Offset(canvasWidth, segmentLengthPx), strokeWidth = borderWidthPx)
                
                // 左下角：水平向右 + 垂直向上的短边框
                drawLine(color = borderColor, start = Offset(0f, canvasHeight), end = Offset(segmentLengthPx, canvasHeight), strokeWidth = borderWidthPx)
                drawLine(color = borderColor, start = Offset(0f, canvasHeight), end = Offset(0f, canvasHeight - segmentLengthPx), strokeWidth = borderWidthPx)
                
                // 右下角：水平向左 + 垂直向上的短边框
                drawLine(color = borderColor, start = Offset(canvasWidth, canvasHeight), end = Offset(canvasWidth - segmentLengthPx, canvasHeight), strokeWidth = borderWidthPx)
                drawLine(color = borderColor, start = Offset(canvasWidth, canvasHeight), end = Offset(canvasWidth, canvasHeight - segmentLengthPx), strokeWidth = borderWidthPx)
            },
        contentAlignment = Alignment.Center
    ) {
        content()
    }
}

你可以根据实际边框样式调整gapSize或cornerSegmentLength的值，完全匹配图中的效果。

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