如何在 Jetpack Compose 中制作虚线/虚线？

Question

我需要从这个答案中复制 android XML 视图，但在 Jetpack Compose 中使用纯 kotlin

Answer 1

您可以在 Jetpack Compose 中创建一个形状，如下所示：

private data class DottedShape(
    val step: Dp,
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ) = Outline.Generic(Path().apply {
        val stepPx = with(density) { step.toPx() }
        val stepsCount = (size.width / stepPx).roundToInt()
        val actualStep = size.width / stepsCount
        val dotSize = Size(width = actualStep / 2, height = size.height)
        for (i in 0 until stepsCount) {
            addRect(
                Rect(
                    offset = Offset(x = i * actualStep, y = 0f),
                    size = dotSize
                )
            )
        }
        close()
    })
}

用法：

Box(
    Modifier
        .height(1.dp)
        .fillMaxWidth()
        .background(Color.Gray, shape = DottedShape(step = 10.dp))
)

结果：

Answer 2

您可以简单地将 aCanvas与drawLine应用为pathEffecta的方法一起使用PathEffect.dashPathEffect：

    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
    Canvas(Modifier.fillMaxWidth().height(1.dp)) {

        drawLine(
            color = Color.Red,
            start = Offset(0f, 0f),
            end = Offset(size.width, 0f),
            pathEffect = pathEffect
        )
    }

您还可以将相同的 pathEffect 应用于其他方法：

    val stroke = Stroke(width = 2f,
      pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
    )
    Canvas(Modifier.fillMaxWidth().height(70.dp)){
       drawRoundRect(color = Color.Red,style = stroke)
    }