[英]Styling a JavaFX 2 button using FXML only - How to add an image to a button?
我想改变一个按钮的样式,这里的大多数线程和互联网上的文章都展示了如何使用Java代码来实现它,我认为这不是一个真正好的解决方案,有没有办法比如说通过仅使用FXML(无Css)设置一个带有一些文本和图像的按钮?
解决方案仅使用fxml
正如tarrsalah指出的那样,css是推荐的做法,但如果您愿意,也可以使用fxml:
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<children>
<Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love Potion">
<font>
<Font size="30.0" />
</font>
<graphic>
<ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png" />
</image>
</ImageView>
</graphic>
</Button>
</children>
</AnchorPane>
要在SceneBuilder中获取上述内容 ,请在Button
顶部拖动ImageView
,它将自动设置为按钮的图形。 然后选择ImageView
并在SceneBuilder属性窗格中的ImageView图像字段中键入图像的URL。
在SceneBuilder中打开上面的fxml以查看下面的图像。
替代css属性
替换-fx-background*
属性的css。
-fx-graphic
-fx-padding
-fx-content-display
-fx-graphic-text-gap
这些只是不同,不一定比你想做的更好。 关于使用它只是一个偏好的事情。 我发现这些设置比-fx-background*
设置更容易使用。 它们更具限制性,但语法和选项对我来说更容易理解,它们的含义映射到用于Labeled的JavaDoc API。
有关属性的详细说明,请参阅css参考指南 。
下面是一个样式设置fxml中嵌入图形的示例,尽管将样式信息分离到tarrsalah样本中的单独css样式表总是更好。
<Button layoutX="138.0" layoutY="226.0" mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png')" text="Love Potion">
<font>
<Font size="20.0" />
</font>
</Button>
仅使用Java代码将图像添加到按钮的相关解决方案
我对css示例进行了一些更改(参考#btn {在注释#3中):
-fx-background-size: 100% 100%;
-fx-background-color: transparent;
这删除了按钮轮廓并仅保留图像。 我能够像在ImageView中一样调整场景生成器中的按钮选择器,并实时查看图片更改。 我添加了一个工具提示来解释图像,因为没有文字和按钮轮廓。 我计划使用其他地方解释的技术,并在点击时更改图像,以提供更多视觉反馈,即图像是按钮。
另请注意:我需要在“CSS Id”(场景生成器)中指定按钮ID,而不是“fx:id”来指定它们的链接。
将这些更改添加到上面解释的内容可以让我实现我的目标:拥有一个看起来像图像的按钮(例如方形按钮中的圆形)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.