如何在Jetpack Compose中绘制完美的垂直虚线/点线

在Jetpack Compose的Canvas中绘制垂直虚线样式的分隔线时，效果不符合预期。尝试了相关方案后仍未解决，当前实现代码如下：

@Composable
fun DrawProgressBar() {
    val rangeComposition = RangeComposition()
    val itemLst = rangeComposition.bpExplained
    val boxSize = 30.dp
    Box(
        modifier = Modifier
            .background(Color.White)
            .height(height = boxSize)
    ) {
        Canvas(
            modifier = Modifier.fillMaxSize()
        ) {
            val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f, 10f), 0f)
            val strokeWidth = 8.dp
            val canvasWidth = size.width
            val canvasHeight = size.height
            val strokeWidthPx = density.run { strokeWidth.toPx() }
            drawLine(
                start = Offset(x = 0f, y = canvasHeight / 2),
                end = Offset(x = canvasWidth, y = canvasHeight / 2),
                color = Color.Gray,
                strokeWidth = strokeWidthPx,
                cap = StrokeCap.Round,
            )
            itemLst.forEachIndexed { index, rangeItem ->
                val endPointInPixel = (rangeItem.endPoint / 100f) * canvasWidth
                if (index != itemLst.lastIndex) {
                    drawLine(
                        start = Offset(x = endPointInPixel, y = 0F),
                        end = Offset(x = endPointInPixel, y = boxSize.toPx()),
                        color = Color.Black,
                        strokeWidth = 2.dp.toPx(),
                        pathEffect = pathEffect,
                    )
                }
            }
        }
    }
}

• 实际效果：垂直虚线的线段间距不均匀，样式杂乱
• 期望效果：垂直虚线由均匀分布的短线段组成，样式规整

调整虚线路径参数和绘制逻辑，即可实现预期效果：

1. 修正虚线参数：将dashPathEffect的数组参数改为floatArrayOf(4f, 6f)，其中第一个值是线段长度，第二个值是间隔长度，可根据视觉需求调整数值；
2. 统一坐标计算：使用Canvas的size.height替代boxSize.toPx()，确保垂直方向的坐标范围准确匹配Canvas实际高度；
3. 明确笔触端点样式：添加cap = StrokeCap.Butt，避免端点样式影响虚线的均匀性。

修改后的完整代码：

@Composable
fun DrawProgressBar() {
    val rangeComposition = RangeComposition()
    val itemLst = rangeComposition.bpExplained
    val boxSize = 30.dp
    Box(
        modifier = Modifier
            .background(Color.White)
            .height(height = boxSize)
    ) {
        Canvas(
            modifier = Modifier.fillMaxSize()
        ) {
            // 调整虚线参数：线段4px，间隔6px，可按需修改
            val pathEffect = PathEffect.dashPathEffect(floatArrayOf(4f, 6f), 0f)
            val strokeWidth = 8.dp
            val canvasWidth = size.width
            val canvasHeight = size.height
            val strokeWidthPx = density.run { strokeWidth.toPx() }
            
            drawLine(
                start = Offset(x = 0f, y = canvasHeight / 2),
                end = Offset(x = canvasWidth, y = canvasHeight / 2),
                color = Color.Gray,
                strokeWidth = strokeWidthPx,
                cap = StrokeCap.Round,
            )
            
            itemLst.forEachIndexed { index, rangeItem ->
                val endPointInPixel = (rangeItem.endPoint / 100f) * canvasWidth
                if (index != itemLst.lastIndex) {
                    drawLine(
                        start = Offset(x = endPointInPixel, y = 0F),
                        // 使用Canvas自身高度确保坐标准确
                        end = Offset(x = endPointInPixel, y = canvasHeight),
                        color = Color.Black,
                        strokeWidth = 2.dp.toPx(),
                        pathEffect = pathEffect,
                        // 显式设置端点样式为Butt，避免线段延长
                        cap = StrokeCap.Butt
                    )
                }
            }
        }
    }
}

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