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

gab6jxml  于 2023-04-07  发布在  Kotlin
关注(0)|答案(1)|浏览(209)

只是不知道如何使指标一样,在提供的图片中Jetpack组成。
尝试使用LinearProgressIndicator,但据我所知,没有办法使其垂直,可悲的是。

yk9xbfzb

yk9xbfzb1#

没有一个简单的方法来做到这一点,但我已经复制了一些我自己的代码作为你如何构建一个的例子:

@Composable
fun VerticalProgressBar(
    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()),
        )
    }
}

结果:

相关问题