通过 css 更改 JavaFX 微调器

Question

我正在尝试使用 css 样式表更改 javafx 微调器的样式。

我知道我可以通过以下代码更改微调按钮的方向：

Spinner<Integer> spinner = new Spinner<Integer>(1, 20, 10);
            spinner.getStyleClass().add(split-arrows-horizontal);
            root.getChildren().add(spinner);

不过，我想通过 CSS 或 FXML 来实现。有谁知道解决方法

Answer 1

您可以使用 fxml 轻松创建这样的 Spinner：

<Spinner styleClass="split-arrows-horizontal">
    <valueFactory>
        <SpinnerValueFactory.IntegerSpinnerValueFactory min="1" max="20" initialValue="10" />
    </valueFactory>
</Spinner>

您当然可以从 modena.css 复制所有样式，其中包含 .split-arrows-horizontal 作为其选择器的一部分并使用所有样式，即使选择器的这一部分不适用，但这似乎与上面发布的方法相比，不必要地复杂。

Answer 2

设置用作按钮背景的 -fx-body-color：

.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
    -fx-body-color: yellow;
}

.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#444, yellow 0%, red 100%);
}

.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}

通过 css 更改 JavaFX 微调器

changing JavaFX spinner via css

css

javafx

spinner

设置用作按钮背景的 -fx-body-color：