仅使用FXML来设置JavaFX 2按钮的样式 - 如何向按钮添加图像？

Question

仅使用FXML来设置JavaFX 2按钮的样式 - 如何向按钮添加图像？

javanetbeansjavafx-2fxmlscenebuilder

31

我想改变按钮的样式，这里大部分帖子和互联网上的文章都展示了如何使用Java代码来实现，但我认为这不是一个真正好的解决方案，是否有一种方法可以仅通过FXML（不用CSS）设置一个包含一些文本和图像的按钮？

- AymenDaoudi

3个回答

11

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

在此输入图片描述

- Salah Eddine Taouririt

2

Add.png应该放在哪里？ - Andrew S

@AndrewS 它将位于与 CSS 相同的目录中。 - ed22

3

我对 CSS 示例做了一些更改（参见评论 #3 中的 #btn）：

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

这样做可以去掉按钮的边框，只留下图片。我能够在场景构建器中像调整ImageView一样调整按钮选择器的大小，并实时看到图片变化。由于没有文本和按钮轮廓，我添加了一条提示信息来解释该图片。我计划使用其他地方解释的技术，在单击时更改图像，以提供更多视觉反馈，表明该图像是一个按钮。

另外需要注意的是：我需要在“CSS Id”（场景构建器）中指定按钮id，而不是“fx:id”，才能将它们链接起来。

以上这些更改加上之前解释的内容，使我达到了我的目标：拥有一个只像图片的按钮（例如，圆形形状在正方形按钮中）。

- Vision9000

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jewelsea · Accepted Answer

仅使用fxml的解决方案

正如tarrsalah所指出的那样，虽然你也可以在fxml中完成此操作，但css是推荐的方法：

<?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文件即可查看下面的图像。

lovepotion

备用CSS属性

替代-fx-background*属性的CSS。

-fx-graphic
-fx-padding
-fx-content-display
-fx-graphic-text-gap

这些只是不同��属性，不一定比你正在尝试做的更好。使用哪个取决于个人喜好。我发现这些设置比-fx-background*设置更容��使用。它们更加严格，但语法和选项对我来说更容易理解，其含义映射到JavaDoc API的Labeled。

有关属性的详细说明在CSS参考指南中。

这是一个样式设置示例，其中嵌入了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代码将图像添加到按钮的相关解决方案