具有透明背景的 JavaFX 按钮

Posted 2023-02-26

【中文标题】具有透明背景的 JavaFX 按钮

【英文标题】：JavaFX Button with transparent background

【发布时间】：2016-08-02 15:33:33

【问题描述】：

我在 JavaFX 中有一些经典的 Button，其中包含一些文本。

我需要没有那个框的按钮，只是文本，当我悬停按钮或用鼠标单击按钮时，它会改变它的颜色。

【问题讨论】：

你的代码在哪里？我们能看到吗？

无特殊代码，场景中只有1个按钮和一个空fxml文件

“直接在这个按钮上”是什么意思？徘徊？点击？单击后更改颜色？

【参考方案1】：

在 JavaFX 中，样式是通过使用 CSS 完成的。

.button
    -fx-border-color: transparent;
    -fx-border-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: transparent;
    -fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 1em; /* 12 */
    -fx-text-fill: #828282;


.button:focused 
    -fx-border-color: transparent, black;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;


.button:pressed 
    -fx-background-color: black;
    -fx-text-fill: white;

将此代码添加到 CSS 文件中，将其保存到包含按钮的控件源文件所在的目录。那么在这个类中：

getStylesheets().add(getClass().getResource("nameofyourcssfile.css").toExternalForm());

然后该对象包含的所有按钮都将使用此样式类。

根据您的需要进行修改很简单。

很好的教程开始： http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

【讨论】：

感谢您的回答，但我可以都放入 fxml 文件吗？还是只能是 CSS 文件？

所有这些样式都可以在类文件中使用.setStyle() 方法为Button 完成。但我不知道你为什么要使用按钮而不是Hyperlink。

您可以使用 Button 完成所有操作以及使用超链接可以完成的更多操作：例如稍后你想用一些图标交换文本。如果您不喜欢 Hyperlink 控件的默认颜色，则无论如何都必须编写 CSS。对于 CSS：将 CSS 放入代码会污染代码。分离样式总是更好，因为它会导致更清洁，更容易更改前端。

【参考方案2】：

JavaFX 有一个Hyperlink control，它基本上具有您正在寻找的所有功能。它以与按钮相同的方式触发ActionEvents：

Hyperlink button = new Hyperlink("Some text");
button.setOnAction(e -> System.out.println("Hyperlink clicked"));

就像网页中的链接一样，如果它被“访问”过，即如果对其触发了操作，它将以不同的颜色显示。

【参考方案3】：

对于任何来这里寻找删除默认按钮背景的方法的人，可以这样做：

button.setBackground(null);

如果您想重新设置按钮的样式，我建议您使用上面的答案那样的 css。

【参考方案4】：

这就是你在scenebuilder中的做法

通过点击选择按钮。

然后在属性->样式中选择“-fx-background-color”并将值设为“透明”

这样