仅使用FXML设计JavaFX 2按钮 - 如何将图像添加到按钮?
我想改变一个按钮的样式,这里的大多数线程和互联网上的文章展示了如何使用Java代码来实现它,我不认为它是一个真正的好方案,有没有什么办法例如,通过仅使用FXML(无Css)来设置一个带有一些文本和图像的按钮?仅使用FXML设计JavaFX 2按钮 - 如何将图像添加到按钮?
解决方案
由于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中的上述内容,请将一个ImageView
拖到Button
之上,它会自动设置为该按钮的图形。然后选择ImageView
,然后在SceneBuilder属性窗格的ImageView的图像字段中输入图像的URL。
在SceneBuilder中打开上面的fxml以查看下面的图像。
替代的CSS属性
替代的CSS到-fx-background*
属性。
-fx-graphic
-fx-padding
-fx-content-display
-fx-graphic-text-gap
这些仅仅是不同的,不一定是更好地为你正在尝试做的。关于使用哪一种,这只是一种偏好。我发现这些设置比-fx-background*
设置更易于使用。它们更具限制性,但语法和选项更容易理解,它们的含义映射到Labeled的JavaDoc API。
属性的详细说明在css reference guide。
下面是一个样式设置嵌入到fxml中的图形的示例,不过最好将样式信息分离到单独的css样式表中,就像在tarrsalah示例中一样。
<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代码
FXML是只用于设计布局,为造型,你可以使用css并从FXML
文件中引用它:
<stylesheets>
<URL value="@main.css" />
</stylesheets>
要在css
的图像添加到fx:id="btn"
按钮:
#btn {
-fx-background-image: url("Add.png");
-fx-background-size: 18 18;
-fx-background-repeat: no-repeat;
-fx-background-position:left;
}
这个Github repository提供了一个完整的运行示例:
只使用FXMLAdd.png位于哪里? – 2016-06-14 19:02:46
一些改动我的CSS例子进行图像按钮相关的解决方案(参考#btn {in评论#3):
-fx-background-size: 100% 100%;
-fx-background-color: transparent;
这删除了按钮轮廓,只留下图像。我能够像SceneView一样调整Scene Builder中的按钮选择器,并实时查看图片变化。我添加了一个工具提示来解释图像,因为没有文本和按钮轮廓。我打算使用其他地方解释的技术,并在点击时更改图像以提供更多视觉反馈,即图像是按钮。
另请注意:我需要在'CSS Id'(场景构建器)中指定按钮ID,而不是'fx:id'以使它们链接。
将上述变化添加到上面解释的内容中,可以实现我的目标:有一个只与图像相似的按钮(例如方形按钮中的圆形)。
+1为完整答案。 – tarrsalah 2013-05-02 17:31:25
这正是我所需要的答案,非常感谢 – AymenDaoudi 2013-05-02 19:13:03
@jewelsea在你的例子中,所有这些爱的按钮是什么? :) – BarbaraKwarc 2016-10-18 03:35:47