将 css 样式添加到 JavaFX 中的 ButtonType

Question

我有一个警报。我正在向其中添加两个 ButtonType。我还向其中添加了一个样式表。但是我怎样才能使 Discard changes 变红呢？我的 CSS 文件中已经有一个 btn-red class。

Alert alert = new Alert(AlertType.CONFIRMATION);
//setting up content text
alert.getDialogPane().getStylesheets().add("file:src/start/styles.css");

ButtonType discardChanges = new ButtonType("Discard Changes");
ButtonType buttonTypeCancel = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
alert.getButtonTypes().setAll(discardChanges, buttonTypeCancel);

.btn-red {
    -fx-background-color: #c41010;
    -fx-text-fill: #ffffff;
}

如果Discard changes有一个红色的危险按钮就好了。

提前致谢！ :)

Answer 1

在解决这个问题一段时间后，我想出的最佳解决方案是遍历 DialogPane 的所有子项并找到正确的按钮。

alert.getDialogPane().getChildren().forEach(node -> {
    if (node instanceof ButtonBar) {
        ButtonBar buttonBar = (ButtonBar) node;
        buttonBar.getButtons().forEach(possibleButtons -> {
            if (possibleButtons instanceof Button) {
                Button b = (Button) possibleButtons;
                if (b.getText().equals("Discard Changes")) {
                    b.setStyle("-fx-background-color: #c41010;  -fx-text-fill: #ffffff;");
                }
            }
        });
    }
});

可能有更好的解决方案，但这个应该可以正常工作。

Answer 2

您可以为每个按钮指定一个 CSS ID（或样式 class），以便您可以在样式表中引用它。您应该使用 DialogPane#lookupButton(ButtonType) 来获取对按钮的引用。该方法returns一个Node因为按钮可以用任何类型的Node来实现；但是，默认情况下返回的对象将是 Button.

的一个实例

例如：

Alert alert = new Alert(AlertType.CONFIRMATION);
//setting up content text
alert.getDialogPane().getStylesheets().add("<path-to-css-resource>");

ButtonType discardChanges = new ButtonType("Discard Changes");
ButtonType buttonTypeCancel = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
alert.getButtonTypes().setAll(discardChanges, buttonTypeCancel);

// Add CSS ID
Node discardButton = alert.getDialogPane().lookupButton(discardChanges);
discardButton.setId("discardBtn");
// Or style class
// discardButton.getStyleClass().add("red-btn");

然后在CSS:

/* Or use the .red-btn style class */
#discardBtn {
  -fx-background-color: #c41010;
  -fx-text-fill: #ffffff;
}

两个注意事项：

您可能需要将上面的 CSS 替换为：
```
#discardBtn {
  -fx-base: #c41010;
}
```
-fx-base 是 "looked-up color"，这就是 modena.css 实现主题的方式。通过设置该值，您的按钮仍将具有 modena.css 应用的所有 hover/armed 效果，只是红色而不是默认的灰色。由于 modena.css 设置文本颜色的方式，文本也将是白色。

您可以查看 modena.css 以查看它定义了哪些查找颜色以及如何使用它们。
您用来添加样式表的路径可疑。如果样式表是资源，那么路径应该更像：
```
alert.getDialogPane().getStylesheets().add(getClass().getResource("/styles.css").toString());
```
假设 src 是源 files/resource 文件的根（即 class 路径的“根”）。

将 css 样式添加到 JavaFX 中的 ButtonType

Add css style to ButtonType in JavaFX

java

javafx

javafx-css