我如何deviseJavaFX中的ProgressBar组件

我正在尝试将自定义CSS样式添加到JavaFX ProgressBar组件，但我找不到有关该主题的任何信息。 我正在寻找的CSS类名称和所需的CSS命令：

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

Answer 1

我已经把这个答案标记为社区维基 。

如果您对原始初始样式查询之外的JavaFX ProgressBar样式有想法，请编辑此帖以添加您的样式创意（或链接到它们）。

设置进度条本身的颜色

回答于：

• JavaFX ProgressBar：如何更改栏颜色？

答案表明

1. 进度条的dynamic样式，使得条的颜色根据所取得的进展量而变化。
2. 进度条的静态样式，它将条的颜色永远设置为定义的颜色。

Windows PC上的JavaFX 7（caspian）：

Mac上的JavaFX 8（modena）：

有时候人们喜欢理发店的极靴风格渐变，就像靴子的条纹风格 ：

• ProgressBaranimationJavafx

设置进度条的背景颜色（与设置背景颜色不一样）

为进度条的“轨迹”定义合适的CSS样式：

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

在进度条顶部添加一个自定义文本节点（以显示不同的状态）

回答于：

• 在一个ProgressBar上绘制一个string，比如JProgressBar？

如何更改进度条的高度：

回答于：

• 如何在JavaFX中获得狭窄的进度条？

示例CSS：

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

JoséPereda在他的回答中提供了一个很好的全面解决scheme，

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

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

要查看的地方是默认的JavaFX样式表。

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

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有所不同）。