Jetpack Compose 中的垂直 LinearProgressIndicator

Question

我想显示垂直 LinearProgressIndicator，意思是全高，小宽度，从上到下动画。我试着将它简单地旋转 90°，这令人惊讶地以某种方式起作用，例如：

Modifier
    .height(8.dp)
    .fillMaxWidth()
    .graphicsLayer {
        rotationZ = 90f
        transformOrigin = TransformOrigin(0f, 0f)
    }

但它似乎受限于 Composable 的宽度，因此无法填满整个高度。更改修饰符的顺序或使用 width/fillMaxHeight 也不起作用。

Answer 1

LinearProgressIndicator是根据Material Guidelines设计的，只包含一个横向进度条。

对于垂直指示器，您必须创建自己的元素。你可以拿LinearProgressIndicatorsource code来举例，很简单

Answer 2

Output 你可以用列和权重做一件事来获得预期的输出

@Composable
fun VerticalProgress(
    progress: Float,
    modifier: Modifier = Modifier
) {
    val mProgress = animateFloatAsState(targetValue = progress / 100)
    Column(
        modifier = modifier
            .clip(RoundedCornerShape(12.dp))
            .background(Color.LightGray)
            .width(16.dp)
    ) {
        Box(
            modifier = Modifier
                .weight(if ((1 - mProgress.value) == 0) 0.0001 else 1 - mProgress.value)
                .fillMaxWidth()
        )
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .weight(mProgress.value)
                .fillMaxWidth()
                .background(
                    Brush.verticalGradient(
                        listOf(
                            Color(0xffE000FF),
                            Color(0xffE000FF),
                            Color(0xFF7700FF),
                            Color(0xFF7700FF),
                        )
                    )
                )
        )
    }
}