css - JavaFX - 根据切换状态在切换按钮上设置不同的悬停颜色

Question

我的程序中有一个启动/停止脚本的切换按钮。我希望此按钮在未被选中时为绿色并显示“START”，在被选中时为红色并显示“STOP”。更重要的是，我希望未选中的悬停颜色是原始绿色的稍微深一点的版本，而选中的悬停颜色是红色的稍微深一点的版本。此按钮的当前 CSS 如下所示:

#startStopButton {
    -fx-border-color:#d4d4d4;
    -fx-background-color:#85eca5;
    -fx-background-image: url("startButton.png");
    -fx-background-size: 50px;
    -fx-background-repeat: no-repeat;  
    -fx-background-position: 80% 50%;
    -fx-alignment: CENTER_LEFT; 
    -fx-effect: dropshadow(three-pass-box, #e7e7e7, 15, 0, 0, 0);
}

#startStopButton:hover {
    -fx-background-color:#80dc9c;
}


#startStopButton:selected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}
#startStopButton:selected:focused{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

目前，这可以正常工作，但按钮变红时除外。在这种情况下，没有悬停效果。在我的 FXML Controller 中，每次单击此按钮时都会激活一个功能:

private void startStopClick()
{
    if(startStopButton.isSelected())
    {
    startStopButton.setText("      STOP");
   // startStopButton.setStyle()
    }
    else {
        startStopButton.setText("     START");
    }
}

有什么方法可以 1) 在 CSS 中设置按钮文本，以便我可以将它从我的 Controller 中删除？ 2)在CSS中获取当前的切换按钮状态，这样我就可以有多个悬停效果。例如，像这样:

#startStopButton:unselected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

如果在 CSS 中没有办法做到这一点，我可以在 FXML Controller 的 Java 代码中设置悬停样式吗？

Answer 1

CSS 属性仅适用于节点的外观。除了少数异常(exception)，基本的 JavaFX 节点不允许您通过 CSS 指定内容。按钮的 text 属性也不异常(exception)；它不能使用 CSS 设置。

至于颜色:最后出现的规则会覆盖之前出现的具有相同优先级的规则分配的值。这意味着 #startStopButton:selected 和 #startStopButton:selected:focused 的规则分配的背景颜色始终覆盖颜色 #startStopButton:hover分配。

由于在这两种情况下您都希望悬停时颜色较深，因此 derive 函数和 lookup 颜色可能适合您。

例子

@Override
public void start(Stage primaryStage) {
    ToggleButton btn = new ToggleButton();
    btn.getStyleClass().add("start-stop");
    btn.textProperty().bind(Bindings.when(btn.selectedProperty()).then("      STOP").otherwise("     START"));
    Pane p = new Pane(btn);

    Scene scene = new Scene(p);
    scene.getStylesheets().add("style.css");
    primaryStage.setScene(scene);
    primaryStage.show();
}

样式.css

.start-stop.toggle-button {
    base-color: #85eca5;
    -fx-background-color: base-color;
}

.start-stop.toggle-button:selected {
    base-color: #ff6060;
}

.start-stop.toggle-button:hover {
    -fx-background-color: derive(base-color, -20%);
}

---

如果您不能使用 derive 因为您需要为所有 4 个状态指定不同的颜色，您仍然可以依赖查找的颜色来避免依赖规则排序:

.start-stop.toggle-button {
    unselected-color: blue;
    selected-color: yellow;

    -fx-background-color: unselected-color;
}

.start-stop.toggle-button:hover {
    unselected-color: red;
    selected-color: green;
}

.start-stop.toggle-button:selected {
    -fx-background-color: selected-color;
}