java - 如何使用 css 更改 Javafx 中 slider 轨道的颜色？

Question

我有一个音乐播放器，我正在尝试更改 slider 轨道颜色而不仅仅是边框颜色

-fx-background-color:改变边框背景颜色-fx-color:改变 slider 点

我试过了-fx-track-fill:它不起作用。

这是我的:

.root
{
    -fx-background-color: #383838;
}
.vbox
{
    -fx-background-color: #549534;
}
.button
{
    -fx-background-color: linear-gradient(#dc9656,#ab4642);
    -fx-text-fill: #ffffff;

}
.label
{
    -fx-text-fill: #ffffff;
}
.slider
{
     -fx-background-color: linear-gradient(#dc9656,#ab4642);
     -fx-color:#549534;
}

Answer 1

解决方案

slider 内部的颜色由 JavaFX CSS 控制 looked up color :

-fx-control-inner-background

您可以在代码中更改颜色:

slider.setStyle("-fx-control-inner-background: palegreen;");

或者在 CSS 中:

.slider .track {
    -fx-control-inner-background: palegreen;
}

背景

这是 slider 控件的标准 CSS(来自 Java 8 安装中 jfxrt.jar 文件内的 modena.css):

.slider .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, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
    -fx-padding: 0.25em; /* 3 */
}

如您所见， slider 轨 Prop 有分层背景，带有阴影高光、边框和内部阴影。内部阴影是从 fx-control-inner-background 派生的渐变。这就是为什么改变查找颜色的值会改变轨道内部的颜色。如果您不熟悉 JavaFX CSS 中背景的分层概念，请阅读 JavaFX Region CSS documentation .