如何使用 Jetpack Compose 制作垂直进度指示器？

Question

只是不知道如何在 Jetpack Compose 中制作提供的图片中的指示器。

尝试使用 LinearProgressIndicator 但据我所知，遗憾的是没有办法让它垂直。

Answer 1

没有 easy 的方法来做到这一点，但我复制了一些我自己的代码作为您如何构建一个代码的示例：

@Composable
fun HorizontalProgressBar(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = Color.Green,
    backgroundColor: Color = Color.Black,
    size: Size = Size(width = 10f, height = 100f),
    strokeSize: Float = 1f,
    strokeColor: Color = Color.Blue
) {
    Canvas(
        modifier = modifier
            .size(size.width.dp,size.height.dp)
            .border(width = strokeSize.dp, color = strokeColor)
    ) {
        // Progress made
        drawRect(
            color = color,
            size = Size(size.width.dp.toPx(), height = (progress * size.height).dp.toPx()),
            topLeft = Offset(0.dp.toPx(), ((1 - progress) * size.height).dp.toPx())
        )
        // background
        drawRect(
            color = backgroundColor,
            size = Size(width = size.width.dp.toPx(), height = ((1 - progress) * size.height).dp.toPx()),
        )
    }
}

结果：