如何修复LinearProgressIndicator的视觉问题并实现指定进度条

嗨，我完全懂你对默认LinearProgressIndicator的视觉细节不满意的点——那个末端的小圆圈和进度条与整体轨道之间的细微间隙，确实会破坏想要的简洁感。别担心，咱们可以通过几个简单的调整来搞定这些问题，下面分两种情况给你方案：

针对Material 3的快速修复方案 #

默认的Material 3 LinearProgressIndicator带有的圆点和间隙，主要是因为它的默认样式设置。我们只需要修改几个参数就能解决：

• 移除末端圆点：设置indicatorStyle = LinearProgressIndicatorStyle.Linear，这个参数会把默认带圆点的末端替换成纯平的线性末端
• 消除轨道间隙：将trackShape和indicatorShape都设为RectangleShape（如果想要圆角也可以换成RoundedCornerShape(xx.dp)，只要两者保持一致），再配合你已经设置的gapSize = 0.dp，就能让进度条完全贴合轨道，没有多余空隙

调整后的完整代码如下：

import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.LinearProgressIndicatorStyle
import androidx.compose.foundation.shape.RectangleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Color

LinearProgressIndicator(
    modifier = Modifier.height(15.dp),
    progress = 0.5f,
    gapSize = 0.dp,
    indicatorStyle = LinearProgressIndicatorStyle.Linear,
    trackColor = Color.Gray.copy(alpha = 0.3f), // 可自定义轨道颜色
    indicatorColor = Color.Blue, // 可自定义进度颜色
    trackShape = RectangleShape,
    indicatorShape = RectangleShape
)

完全自定义的终极方案（适用于所有Compose版本） #

如果你想100%掌控进度条的每一处视觉细节，完全避免Compose默认组件的各种“隐藏”样式，用两个Box来模拟进度条是最稳妥的方式：

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.shape.RectangleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Color

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(15.dp)
        .background(Color.Gray.copy(alpha = 0.3f), shape = RectangleShape)
) {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(0.5f) // 这里的0.5f对应0-100%的进度，比如0.8f就是80%
            .background(Color.Blue, shape = RectangleShape)
    )
}

这种方式没有任何默认样式的干扰，你可以随意调整高度、颜色、圆角，完全符合你的视觉需求。

内容来源于stack exchange