JavaFX - 更改特定于滑块的颜色

Posted 2021-04-07

所以我要在我的gui应用程序中添加一个密码生成器，我想添加一个滑块来选择密码的安全性。我可以改变所有刻度的颜色，但我希望第一个为红色，第二个为黄色，最后一个刻度为绿色。这是用于更改所有主要刻度的颜色的css代码。 （摘自Changing the colour of slider ticks）

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke: red;
}

答案

首先，让我们创建一个像你提议的滑块，有三个主要的标记：

@Override
public void start(Stage primaryStage) {
    Slider slider = new Slider(0, 10, 5);
    slider.setMajorTickUnit(5);
    slider.setMinorTickCount(0);
    slider.setShowTickMarks(true);
    slider.setSnapToTicks(true);
    StackPane root = new StackPane(slider);
    root.getStyleClass().add("pane");
    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

其中style.css包含：

.pane {
    -fx-background-color: #dcdcdc;
    -fx-padding: 10;
}

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke: red;
}

现在让我们检查轴刻度标记是如何创建的以及它们是什么类型的节点。为此，您可以选择以下任何选项：

• 看看源代码
• 使用查找
• 使用ScenicView

此时lookup更快。显示舞台后添加呼叫：

primaryStage.show();

System.out.println("Axis-Tick-Mark: " + slider.lookup(".axis-tick-mark"));

它会打印出来：

Axis-Tick-Mark: Path[elements=[MoveTo[x=0.0, y=0.0], LineTo[x=0.0, y=5.0], MoveTo[x=132.0, y=0.0], LineTo[x=132.0, y=5.0], MoveTo[x=264.0, y=0.0], LineTo[x=264.0, y=5.0]], fill=null, fillRule=NON_ZERO, stroke=0xff0000ff, strokeWidth=1.0]

你去了，轴刻度标记是Path，单个节点。这意味着你不能获得任何线条和不同的样式。

但是，如果使用渐变修改stroke属性，则没有什么能阻止您对整个路径进行样式设置。

所以让我们根据你的颜色添加一个线性渐变：

.slider .axis .axis-tick-mark {
    -fx-fill: null;
    -fx-stroke-width: 2;
    -fx-stroke: linear-gradient(to right, red, yellow, green);
}

这将按预期工作：

显然你可以将它扩展到不同的设置（超过三个刻度），垂直方向，更多或不同的颜色......