如何恢复 JavaFX 中按钮的 onclick 效果答案

【问题标题】：How to get back the onclick effect on a button in JavaFX如何恢复 JavaFX 中按钮的 onclick 效果
【发布时间】：2016-02-15 00:55:44
【问题描述】：

我在这个特定问题上寻找解决方案，并在 Silverlight 和 JavaScript 上找到了一些解决方案，但在 JavaFX 上没有。

现在讨论这个问题：

我正在用 JavaFX 设计一个 GUI，其中添加了两个按钮：添加和删除

我使用 CSS 设置了添加按钮的样式，但它失去了悬停和点击效果。为了更好地理解这个问题，我附上了几张图片

如果您查看this 此处的照片，您会看到当单击“删除”按钮时，它的颜色会略微改变，以呈现当前正在被单击的效果。此外，当光标悬停在它上面时，它会变得比平时稍微亮一点。

这个按钮的代码如下

VBox rightBox = new VBox(remBttn);
rightBox.setPadding(new Insets(10));
rightBox.setAlignment(Pos.CENTER);
remBttn.setPadding(new Insets(100,0,100,0));
remBttn.setPrefWidth(100);
remBttn.setOnAction(
        new EventHandler<ActionEvent>()
        {
            public void handle(ActionEvent ae)
            {
                myLabel.setText("You Clicked The REMOVE Button");
            }
        });
remBttn.setFont(Font.font(20));

但是，如果您查看此处的this 照片，您会注意到悬停和单击对它没有任何影响。我对 CSS 了解不多，所以我从一个随机网站复制了一段 sn-p 代码来设置我的按钮样式。但我认为这就是我搞砸的地方。

代码如下：

VBox leftBox = new VBox(addBttn);
leftBox.setPadding(new Insets(10));
leftBox.setAlignment(Pos.CENTER);
addBttn.setPadding(new Insets(100,0,100,0));
addBttn.setPrefWidth(100);
addBttn.setStyle("-fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); -fx-focus-color: transparent; -fx-base: coral;");

所以我想知道在不改变样式的情况下，可以使用哪些方法或属性来恢复相同的效果。

【问题讨论】：

在您发布的代码中，我没有看到删除按钮的任何样式定义。
是的！我没有，因为我不需要。我猜JavaFX默认按钮已经定义了这样的东西。我设置了添加按钮的样式，我不再获得默认的悬停在点击效果上。所以我想知道是否有某些方法或属性可以重新定义 ADD 按钮的这种效果

标签： java css user-interface button javafx

【解决方案1】：

当你改变按钮背景的那一刻，它会失去它默认的悬停和点击效果，所以我认为更好的做法是在css中设置悬停和点击效果。

顺便说一句，不要在代码中再次设置样式，只需在 src 文件夹中创建一个 css 文件，然后使用它链接到您的场景。

scene.getStylesheets().add(getClass().getResource("your_file_name.css").toExternalForm());

然后使用 addBttn.setId("addBttn"); 将 id 添加到您的添加按钮然后在 your_file_name.css 中引用它

#addBttn{
   /*Your custom default button style*/
}

#addBttn:hover{
   /*Your button style on hover*/
}

#addBttn:pressed{
    /*Your button style on pressed*/
 }

希望这能解决您的问题。

【讨论】：