如何在JavaFX中设置ProgressBar组件的样式

Question

我试图将自定义CSS样式添加到JavaFX ProgressBar组件,但我找不到有关该主题的任何信息.我正在寻找以下所需的css类名称和css命令:

• 设置进度条本身的颜色
• 设置进度条的背景颜色(与设置背景颜色不同)
• 在进度条顶部添加自定义文本节点(以显示不同的状态)

Answer 1

我已将此答案标记为社区维基.

如果您对原始初始样式查询之外的JavaFX ProgressBar样式有想法,请编辑此帖子以添加样式构思(或链接到它们).

设置进度条本身的颜色

回答于:

• JavaFX ProgressBar:如何更改条形颜色？

答案表明

1. 进度条的动态样式,以便条的颜色根据所取得的进度而变化.
2. 进度条的静态样式,只是将条形图的颜色永久设置为定义的颜色.

Windows PC上的JavaFX 7(caspian):

Mac上的JavaFX 8(Modena):

有时人们喜欢理发店的杆式渐变,就像引导条纹样式:

• ProgressBar动画Javafx

设置进度条的背景颜色(与设置背景颜色不同)

为进度条的"轨道"定义合适的css样式:

.progress-bar > .track {
  -fx-text-box-border: forestgreen;
  -fx-control-inner-background: palegreen;
}

在进度条顶部添加自定义文本节点(以显示不同的状态)

回答于:

• 将一个字符串绘制到ProgressBar上,就像JProgressBar一样？

如何更改进度条的高度:

回答于:

• 如何在JavaFX中获得简洁的进度条？

CSS示例:

.progress-bar .bar { 
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

JoséPereda在答案中为狭窄的进度条提供了一个很好的综合解决方案:

• 如何在JavaFX中获得一个小型ProgressBar

我正在寻找css类名和css命令

要查看的位置是默认的JavaFX样式表.

• 适用于Java 8的modena.css.
• caspian.css for Java 7.

caspian(Java 7)的ProgressBar样式定义是:

.progress-bar {
    -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin";
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
    -fx-background-insets: 0, 1;
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}

.progress-bar .bar {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
        linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0.416667em; /* 5 */
}

.progress-bar:indeterminate .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}

.progress-bar .track {
     -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
    -fx-background-insets:  0, 1;
}

.progress-bar:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

modena(Java 8)的进度条样式定义是:

.progress-bar {
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

的JavaFX的CSS参考指南包含JavaFX中使用CSS(其从在HTML中使用CSS有所不同)的一般信息.