Jetpack Compose 如何实现占满高度的垂直LinearProgressIndicator？

问题根因 #

原有方案的核心问题是旋转后的宽高映射关系搞反了：LinearProgressIndicator默认水平方向的长度对应组件宽度、厚度对应组件高度，旋转90度后，原组件宽度会变成旋转后的高度，原高度变成旋转后的宽度，原有配置用fillMaxWidth拿的是父布局宽度，自然无法匹配父布局高度。

可行实现代码 #

// 父布局可根据实际场景替换，这里仅做约束示例
Box(
    modifier = Modifier
        .fillMaxHeight() // 父布局占满高度
        .width(8.dp) // 这个值就是最终垂直进度条的窄宽度
) {
    LinearProgressIndicator(
        // 如需进度从上到下增长，直接传入 1 - 实际进度值即可
        progress = 0.4f,
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer {
                rotationZ = 90f
                transformOrigin = TransformOrigin(0f, 0f)
                // 平移修正旋转后的位置偏移，平移距离等于原组件的宽度（也就是设置的8.dp转像素值）
                translationY = size.width
            }
    )
}

关键说明 #

• 修饰符顺序必须严格按照：尺寸约束 -> 图形变换的顺序，图形变换才能拿到正确的组件尺寸计算偏移量
• 不需要额外嵌套父布局也可实现：直接给LinearProgressIndicator的Modifier先设置width(8.dp).fillMaxHeight()，再加上上面的graphicsLayer配置即可
• 进度方向调整：如果默认旋转后进度是从下到上播放，只要把progress参数替换为1 - 实际进度，就能实现从上到下的播放效果

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