Question

我的程序中有一个切换按钮，用于启动/停止脚本。我希望此按钮为绿色，当未选择该按钮时说“开始”，而为红色，并在选择该按钮时说“停止”。更重要的是，我希望未选择的悬停颜色是原始绿色的稍暗版本，而选定的悬停颜色是红色的稍暗的版本。我当前用于此按钮的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控制器中，每次单击此按钮都会激活一个功能：

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

有什么办法1）在CSS中设置按钮文本，以便可以将其保留在控制器之外？ 2）在CSS中获取当前的切换按钮状态，这样我可以拥有多个悬停效果。例如，如下所示：

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

如果无法在CSS中执行此操作，是否可以在FXML控制器的Java代码中设置悬停样式？

Answer 1

CSS属性仅可用于节点外观。除了少数例外，基本的JavaFX节点不允许您通过CSS指定内容。按钮的text属性也不例外；不能使用CSS进行设置。

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

由于在两种情况下您都希望在悬停时使用较深的颜色，所以derive函数和查找的颜色可能对您有用。

示例

@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();
}

style.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;
}

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

1 个答案:

示例

style.css