如何根据JFXSlider滑块当前位置的颜色，更改滑块拇指的颜色？

Question

如何根据JFXSlider滑块当前位置的颜色，更改滑块拇指的颜色？

4

我在JavaFX中使用了一个JFXSlider，用CSS为JFXSlider的轨道添加了线性渐变。然而，我还想将滑块的颜色改为该位置的滑块颜色。我已经使用以下CSS设置了滑块的线性渐变，并去掉了JFXSlider默认的绿色颜色：

.jfx-slider .track {
    -fx-pref-height: 10;
    -fx-background-color: linear-gradient(to right,red,orange);
}
.jfx-slider .colored-track {
    -fx-background-color: transparent;
}

我尝试了以下CSS代码来使滑块当前位置的拇指颜色与滑块颜色相同，但是没有成功。

.jfx-slider .thumb {
    -fx-background-color: linear-gradient(to right,red,orange);
}

我想可能是因为我尝试的代码只提供了拇指背景色的内部线性渐变。有人知道如何解决这个问题吗？附言：我正在使用JFoenix 9.0.10、JavaFX 15和JDK 15。

- Tech Expert Wizard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JKostikiadis · Accepted Answer

一个可能的解决方案是添加一个全局CSS变量，并根据JFXSlider当前值对其进行更改。例如：

一种可能的解决方法是添加一个全局CSS变量，并根据JFXSlider的当前值进行更改。例如：

.root {
    -fx-custom-color : red;
}

然后在您的jfx滑块css规则中使用此变量，例如：

/* Styling the slider thumb */
.jfx-slider>.thumb {
    -fx-background-color: -fx-custom-color;
}

/* Styling the animated thumb */
.jfx-slider>.animated-thumb {
    -fx-background-color: -fx-custom-color;
}

接下来，您需要弄清如何更新“-fx-custom-color”变量以及如何确定需要设置哪种颜色来对应 Slider 的特定值（或位置）。

首先，您应该添加一个监听器来监听值的变化。其次，使用 Color 类的 interpolate 方法来确定颜色，最后，使用内联 CSS 样式更新 JFXSlider 的 -fx-custom-color 新值。

以下是一个完整的示例：

import com.jfoenix.controls.JFXSlider;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SliderTesting extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        JFXSlider slider = new JFXSlider(0, 100, 0);

        slider.valueProperty().addListener(e -> {
            Color imageColor = Color.RED.interpolate(Color.ORANGE,
                    slider.getValue() / 100);
            slider.setStyle("-fx-custom-color : " + colorToHex(imageColor) + ";");
        });

        VBox box = new VBox(slider);
        box.setPadding(new Insets(20));
        box.setPrefSize(400, 400);
        box.setAlignment(Pos.CENTER);

        Scene scene = new Scene(box);
        scene.getStylesheets()
                .add(this.getClass().getResource("custom-jfoenix.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static String colorToHex(Color color) {
        return String.format("#%02X%02X%02X", (int) (color.getRed() * 255),
                (int) (color.getGreen() * 255), (int) (color.getBlue() * 255));
    }
}

还有“custom-jfoenix.css”文件。

.root {
    -fx-custom-color : red;
}

/* Styling the slider track */
.jfx-slider>.track {
    -fx-pref-height: 10;
}

/* Styling the slider thumb */
.jfx-slider>.thumb {
    -fx-background-color: -fx-custom-color;
}

/* Styling the filled track */
.jfx-slider>.colored-track {
    -fx-background-color: linear-gradient(to right, red, orange);
}

/* Styling the animated thumb */
.jfx-slider>.animated-thumb {
    -fx-background-color: -fx-custom-color;
}

结果如下：