如何实现JavaFX ProgressBar分段固定颜色样式（非随动渐变）

当然可以实现你想要的这种分段固定颜色的进度条！你之前遇到的问题，是因为默认情况下渐变是基于bar组件自身的宽度计算的——当进度变化时，bar的宽度跟着缩放，渐变的颜色分界点也会随之移动，达不到VU表那种固定分段的效果。

解决思路 #

我们需要让渐变背景基于整个进度条的轨道宽度来渲染，而不是随bar的宽度变化。通过CSS的背景图片属性就能轻松实现这个需求：

/* 自定义进度条分段样式 */
.progress-bar .track {
    /* 设置轨道的基础背景色，可根据需求调整 */
    -fx-background-color: #e0e0e0;
}

.progress-bar .bar {
    /* 定义分段颜色的渐变 */
    -fx-background-image: linear-gradient(to right, 
        #689F38 0%, #689F38 70%,  /* 0-70% 区间为绿色 */
        #FBC02D 70%, #FBC02D 85%, /* 70-85% 区间为黄色 */
        #d32f2f 85%, #d32f2f 100% /* 85-100% 区间为红色 */
    );
    /* 让渐变背景覆盖整个进度条的宽度和高度 */
    -fx-background-size: 100% 100%;
    /* 背景从左侧居中位置开始显示 */
    -fx-background-position: left center;
    /* 禁止背景重复渲染 */
    -fx-background-repeat: no-repeat;
    /* 移除默认边框和内边距，让样式更贴合 */
    -fx-background-insets: 0;
    -fx-border-width: 0;
}

效果说明 #

这样设置后，渐变背景是基于整个进度条的轨道宽度渲染的，bar只是显示这个背景的左半部分（宽度等于当前进度的百分比）：

• 进度50%时，bar只显示纯绿色区域；
• 进度75%时，bar显示绿色+部分黄色区域；
• 进度90%时，bar显示绿色+黄色+部分红色区域；
• 无论进度如何变化，颜色分界点始终固定在整个进度条的70%和85%位置，不会跟着移动。

额外样式优化（可选） #

如果需要调整进度条的圆角、高度等细节，可以添加以下CSS：

.progress-bar {
    -fx-pref-height: 20px; /* 设置进度条高度 */
    -fx-background-radius: 10px; /* 整个进度条的圆角 */
}

.progress-bar .track {
    -fx-background-radius: 10px; /* 轨道的圆角，和整体保持一致 */
}

.progress-bar .bar {
    -fx-background-radius: 10px; /* 进度填充部分的圆角 */
}

内容的提问来源于stack exchange，提问作者František Jeřábek