Question

我正在JavaFX中创建一个计算器。我有一个带有 fx：ID #labelResult 的标签，用css设计。现在我将键盘监听器添加到主窗格。因此，当我按左/右箭头键时，我将#labelResult的背景颜色更改为字符串bgColors数组中的颜色。我还添加了一个功能，可以在按下上/下箭头键时更改标签字体大小。现在的问题是。似乎我不能同时应用这两种效果。因此，当我更改标签的背景颜色并触发更改字体大小机制时，字体大小效果会在bg颜色效果重置时应用于标签。我怎样才能同时应用这两种效果？

P.S：我使用setStyle方法在我的控制器中应用两种情况下的样式。

 CSS (before applying styles in my controller)

#labelRESULT {  
-fx-background-color: rgba(59, 74, 107, 0.8);
-fx-font-size: 45px;
-fx-text-fill: #fff;
}

Controller.java

@FXML
private Label labelRESULT;

@FXML
private void handleKeys(KeyEvent event) {
    int size = 45;
    String keyPressed = event.getCode().toString().toUpperCase();
    switch (keyPressed) {
        case "RIGHT":
            labelRESULT.setStyle("-fx-bg-color: #" + bgColors[1]);
            break;
        case "UP":
            labelRESULT.setStyle("-fx-font-size: " + (size + 2) + "px;");
            break;
    }
}

发生的事情的图像：http://imgh.us/javafx-calc.png

  在以编程方式应用样式之前
1-
     更改标签的bg颜色后
2-
     更改bg颜色后更改标签字体大小后
3-

Answer 1

您只需将css-classes添加/切换到您的节点即可。

JavaFXUtils.addClasses(node, "my-class-for-font");
JavaFXUtils.removeClasses(node, "my-class-for-color");

Answer 2

如果你将getStyle（）（即bgColor）的结果与其他样式（即fontSize）连在一起，然后再次使用setStyle（），这可能会有帮助吗？

编辑这将是另一种选择（在正确的位置将标志设置为true或false）：

labelRESULT.pseudoClassStateChanged(PseudoClass.getPseudoClass("left-right-pressed"), flag);


labelRESULT.pseudoClassStateChanged(PseudoClass.getPseudoClass("up-down-pressed"), flag);

并在你的css中定义一个自定义伪类：

:left-right-pressed {
    -fx-background-color: yellow;
}

:up-down-pressed {
    -fx-font-size: 14;
}

如何以编程方式同时将多个样式应用于单个节点

2 个答案: