17

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

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

3 回答 3

61

我已将此答案标记为community wiki。

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

设置进度条本身的颜色

回答于：

答案证明

  1. 进度条的动态样式，因此进度条的颜色会根据进度量而变化。
  2. 进度条的静态样式，它只是将进度条的颜色永远设置为定义的颜色。

Windows PC 上的 JavaFX 7（里海）：

彩色进度条

Mac 上的 JavaFX 8 (modena)：

进度条 mac

有时人们喜欢理发店杆样式渐变，例如引导条纹样式：

理发店四重奏

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

为进度条的“轨道”定义适当的 css 样式：

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

进度条背景颜色

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

回答于：

进度条上的字符串

如何更改进度条的高度：

回答于：

示例 CSS：

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

José Pereda 在回答以下问题时为狭窄的进度条提供了一个很好的综合解决方案：

小进步

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

要查看的位置在默认的 JavaFX 样式表中。

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

于 2013-10-17T05:07:31.913 回答
2

像附加Gluon这样的简约现代风格有它，非常适合标题中的负载条：

-没有半径

- 没有填充到酒吧

- 简单的颜色

.progress-bar {
    -fx-accent: rgba(0, 138, 230, 0.85);
}

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

.progress-bar > .track {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
    -fx-text-box-border: transparent;
    -fx-control-inner-background: transparent;
    -fx-background-color: rgba(255, 255, 255, 0.1);
}

非常感谢您提供有关我无法直观找到的样式（.track 和 .bar）的信息。在此处输入图像描述

于 2021-07-02T17:41:18.487 回答
0

css 文件：

.green-bar {
    -fx-accent: #27BB9A;
}

将此类分配给进度条

于 2018-11-14T14:48:47.323 回答