Question

是否可以将javaFx的progressBar设置为在进度条的某些部分上具有不同的颜色。我尝试将条形颜色设置为渐变。它是渐变，但是当我降低百分比时，颜色随着进度条移动。我想创建类似于这张图片的进度条样式：

这是我试过的风格：

.progress-bar .bar {
    -fx-background-color: 
        linear-gradient(to right,#689F38 0%, #689F38 70%, #FBC02D 85%,  #d32f2f 100%);
}

Answer 1

这可以通过一个小技巧来完成。在基本的CSS中，有一种称为“线性渐变”的颜色函数。基本上它会创建渐变，但也允许颜色停止。在颜色停止之间应用渐变。

想象一下下面的位样式规则

-fx-background-color: linear-gradient(to right, green 60%, yellow 80&, red 100%);

这会产生如下情况：

但是如果你在范围的开头和结尾添加一个具有相同颜色的额外停止，你最终会得到一个硬边。这是因为你在系统改变同一位置的颜色时会欺骗系统，而边缘之间的实际空间在低端和高端都包含相同的颜色。 e.g：

-fx-background-color: linear-gradient(to right, green 0%, green 60%, yellow 60%, yellow 80%, red 80%, red 100%);

这将产生预期的效果：

作为旁注，我们不必定义第一种颜色的开始（在这种情况下为绿色），以及最后一种颜色的结束（在这种情况下为红色）。这是因为css将自动假设颜色填充剩余的空间。因此，完成规则可以缩短为：

-fx-background-color: linear-gradient(to right, green 60%, yellow 60%, yellow 80%, red 80%);