如何使用Jetpack Compose实现垂直进度指示器？

因为默认的LinearProgressIndicator仅支持横向显示，要实现垂直样式可以用以下两种方式：

方案一：旋转现有组件快速实现 #

通过Modifier.rotate()将横向进度指示器旋转为垂直方向，注意旋转后宽高会互换，需要提前指定合适的尺寸：

LinearProgressIndicator(
    progress = 0.7f, // 进度值范围0-1
    modifier = Modifier
        .size(200.dp, 24.dp) // 旋转前宽200dp、高24dp，旋转后变为高200dp、宽24dp
        .rotate(270f) // 顺时针旋转270度，实现从下往上填充的垂直效果
)

如果需要从上往下填充，将旋转角度改为90f即可。

方案二：自定义Canvas绘制（更灵活） #

直接用Canvas绘制垂直进度条，可完全控制进度方向、圆角、颜色等细节：

@Composable
fun VerticalLinearProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f),
    progressColor: Color = MaterialTheme.colors.primary
) {
    Canvas(modifier = modifier) {
        val barWidth = size.width
        val progressHeight = size.height * progress

        // 绘制背景条
        drawRoundRect(
            color = backgroundColor,
            size = Size(barWidth, size.height),
            cornerRadius = CornerRadius(barWidth / 2, barWidth / 2)
        )

        // 绘制从底部往上填充的进度条
        drawRoundRect(
            color = progressColor,
            topLeft = Offset(0f, size.height - progressHeight),
            size = Size(barWidth, progressHeight),
            cornerRadius = CornerRadius(barWidth / 2, barWidth / 2)
        )
    }
}

// 使用示例
VerticalLinearProgressIndicator(
    progress = 0.7f,
    modifier = Modifier.size(24.dp, 200.dp)
)

两种方案对比：

• 旋转方案：代码量少，快速实现，但样式调整受限于原组件
• 自定义方案：完全自定义样式，适配各种需求，但需要手动处理绘制逻辑

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