JavaFX

Question

我的程序中有一个 starts/stops 脚本的切换按钮。我希望这个按钮在未被选中时为绿色并显示 "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 控制器中，每次单击此按钮时都会激活一个功能：

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 - 根据切换状态在切换按钮上设置不同的悬停颜色

JavaFX - Set different hover colors on toggle button based on toggle state

css

togglebutton

例子

style.css