一个可能的解决方案是添加一个全局CSS变量,并根据JFXSlider当前值对其进行更改。例如:
一种可能的解决方法是添加一个全局CSS变量,并根据JFXSlider的当前值进行更改。例如:
.root {
-fx-custom-color : red;
}
然后在您的jfx滑块css规则中使用此变量,例如:
.jfx-slider>.thumb {
-fx-background-color: -fx-custom-color;
}
.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;
}
.jfx-slider>.track {
-fx-pref-height: 10;
}
.jfx-slider>.thumb {
-fx-background-color: -fx-custom-color;
}
.jfx-slider>.colored-track {
-fx-background-color: linear-gradient(to right, red, orange);
}
.jfx-slider>.animated-thumb {
-fx-background-color: -fx-custom-color;
}
结果如下:
结果如下:
![输入图像描述](https://istack.dev59.com/WpcaW.gif)
slider1.valueProperty().addListener((ov,old,nw)->slider1.setStyle("-fx-custom-color:"+colorToHex(Color.RED.interpolate(Color.ORANGE,nw.doubleValue()/100))));
(抱歉代码压缩了;我喜欢紧凑的代码)。基本上,我只是使用了一个ChangeListener
而不是一个InvalidationListener
。这里有什么帮助吗?谢谢! - Tech Expert Wizard(nw.doubleValue()-1)/9
之类的东西。感谢你的所有帮助!我已经接受了你的答案。 - Tech Expert Wizard