如何在 Jetpack Compose 中使用虚线边框？

Question

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

Answer 1

在正常的边框修改器中进行一些挖掘之后，我发现它使用 Stroke 对象，它可以采用参数 PathEffect让它变成虚线，这里是采用此参数的普通边框函数的修改版本。

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

Answer 2

使用 1.0.x 时，没有带有短划线路径的内置 Modifier.border()。

但是您可以在 Canvas 中使用 PathEffect.dashPathEffect。
类似于：

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

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

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
        )
    }
}

如何在 Jetpack Compose 中使用虚线边框？

How to have dashed border in Jetpack Compose?

android

border

android-jetpack-compose