如何在 Jetpack Compose 中设置虚线边框？

Question

我可以使用 轻松创建普通边框，Modifier.border()但如何创建虚线边框，如下图所示。

Answer 1

没有参数可以Modifier.border()实现虚线路径。

但是，您可以使用 a来DrawScope绘制虚线。PathPathEffect.dashPathEffect

就像是：

val stroke = Stroke(width = 2f,
    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)

您可以使用修改器绘制它drawBehind：

Box(
    Modifier
        .size(250.dp,60.dp)
        .drawBehind {
            drawRoundRect(color = Color.Red, style = stroke)
        },
    contentAlignment = Alignment.Center
) {
    Text(textAlign = TextAlign.Center,text = "Tap here to introduce yourseft")
}

如果你想要圆角，只需使用方法cornerRadius中的属性drawRoundRect：

drawRoundRect(color = Color.Red,style = stroke, cornerRadius = CornerRadius(8.dp.toPx()))

如果您愿意，可以Modifier使用上面相同的代码构建您的自定义。就像是：

fun Modifier.dashedBorder(strokeWidth: Dp, color: Color, cornerRadiusDp: Dp) = composed(
    factory = {
        val density = LocalDensity.current
        val strokeWidthPx = density.run { strokeWidth.toPx() }
        val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }

        this.then(
            Modifier.drawWithCache {
                onDrawBehind {
                    val stroke = Stroke(
                        width = strokeWidthPx,
                        pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
                    )

                    drawRoundRect(
                        color = color,
                        style = stroke,
                        cornerRadius = CornerRadius(cornerRadiusPx)
                    )
                }
            }
        )
    }
)

然后应用它：

Box(
    Modifier
        .size(250.dp,60.dp)
        .dashedBorder(1.dp, Red, 8.dp),
    contentAlignment = Alignment.Center
) {
    Text(
        text = "Tap here to introduce yourself",
        textAlign = TextAlign.Center,
    )
}

Answer 2

在对正常边框修改器进行一番挖掘之后，我发现它使用Stroke对象，该对象可以采用可以使其成为虚线的参数PathEffect，这里是采用该参数的正常边框函数的修改版本。

https://gist.github.com/DavidIbrahim/236dadbccd99c4fd328e53587df35a21

Answer 3

我为修改器编写了这个扩展，您可以简单地使用它或修改它。

fun Modifier.dashedBorder(width: Dp, radius: Dp, color: Color) = 
    drawBehind {
        drawIntoCanvas {
            val paint = Paint()
                .apply {
                    strokeWidth = width.toPx()
                    this.color = color
                    style = PaintingStyle.Stroke
                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
        }
        it.drawRoundRect(
            width.toPx(),
            width.toPx(),
            size.width - width.toPx(),
            size.height - width.toPx(),
            radius.toPx(),
            radius.toPx(),
            paint
        )
    }
}