我的程序中有一个切换按钮,用于启动/停止脚本。我希望此按钮为绿色,当未选择该按钮时说“开始”,而为红色,并在选择该按钮时说“停止”。更重要的是,我希望未选择的悬停颜色是原始绿色的稍暗版本,而选定的悬停颜色是红色的稍暗的版本。我当前用于此按钮的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代码中设置悬停样式?
答案 0 :(得分: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();
}
.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;
}