仅使用 FXML 为 JavaFX 2 按钮设置样式 - 如何将图像添加到按钮？答案

【问题标题】：Styling a JavaFX 2 button using FXML only - How to add an image to a button?仅使用 FXML 为 JavaFX 2 按钮设置样式 - 如何将图像添加到按钮？
【发布时间】：2013-05-02 14:08:40
【问题描述】：

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

【问题讨论】：

标签： java netbeans javafx-2 fxml scenebuilder

【解决方案1】：

仅使用 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&#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 属性

-fx-background* 属性的备用 css。

-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 代码向按钮添加图像的相关解决方案

【讨论】：

@jewelsea 您在示例中使用的所有这些爱按钮是怎么回事？ :)
@BarbaraKwarc 分享爱 :-) “一根蜡烛可以点燃成千上万根蜡烛，一根蜡烛的寿命不会缩短。幸福永远不会因分享而减少。”
@jewelsea 发现这些美丽的线条真是个奇怪的地方。 :)

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

【讨论】：

Add.png 的位置在哪里？
@AndrewS 它将与 CSS 位于同一目录中

【解决方案3】：

我对 css 示例进行了一些更改（参考 #btn { 在评论 #3 中）：

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

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

另请注意：我需要在“CSS Id”（场景生成器）而不是“fx:id”中指定按钮 id 才能链接它们。

将这些更改添加到上面解释的内容使我能够实现我的目标：拥有一个看起来只像图像的按钮（例如方形按钮中的圆形）。

【讨论】：