仅使用FXML设计JavaFX 2按钮 - 如何将图像添加到按钮？

Question

我想改变一个按钮的样式，这里的大多数线程和互联网上的文章展示了如何使用Java代码来实现它，我不认为它是一个真正的好方案，有没有什么办法例如，通过仅使用FXML（无Css）来设置一个带有一些文本和图像的按钮？

Answer 1

解决方案

由于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&#10;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&#10;Potion"> 
    <font> 
    <Font size="20.0" /> 
    </font> 
</Button> 

---

添加只使用Java代码

• JavaFX - create custom button with image
• Add image to a button at a specific position JavaFX

Answer 2

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提供了一个完整的运行示例：

只使用FXML

Answer 3

一些改动我的CSS例子进行图像按钮相关的解决方案（参考#btn {in评论＃3）：

-fx-background-size: 100% 100%; 
-fx-background-color: transparent; 

这删除了按钮轮廓，只留下图像。我能够像SceneView一样调整Scene Builder中的按钮选择器，并实时查看图片变化。我添加了一个工具提示来解释图像，因为没有文本和按钮轮廓。我打算使用其他地方解释的技术，并在点击时更改图像以提供更多视觉反馈，即图像是按钮。

另请注意：我需要在'CSS Id'（场景构建器）中指定按钮ID，而不是'fx：id'以使它们链接。

将上述变化添加到上面解释的内容中，可以实现我的目标：有一个只与图像相似的按钮（例如方形按钮中的圆形）。