通过 css 更改 JavaFX 微调器答案

【问题标题】：changing JavaFX spinner via css通过 css 更改 JavaFX 微调器
【发布时间】：2020-12-09 10:38:04
【问题描述】：

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

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

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

但是，我想通过 CSS 或 FXML 来实现。有人知道解决办法吗

【问题讨论】：

标签： css javafx spinner

【解决方案1】：

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

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

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

【讨论】：

【解决方案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%);
}

【讨论】：