Jetpack Compose 中的垂直 LinearProgressIndicator

Posted 2023-02-22

【中文标题】Jetpack Compose 中的垂直 LinearProgressIndicator

【英文标题】：Vertical LinearProgressIndicator in Jetpack Compose

【发布时间】：2022-01-12 15:10:10

【问题描述】：

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

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

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

【参考方案1】：

LinearProgressIndicator 是根据Material Guidelines 设计的，只包含一个水平进度指示器。

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

【讨论】：

我尝试了很多方法来避免这种情况。最后我用了不到 5 分钟，看起来棒极了！