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

java netbeans javafx-2 scenebuilder fxml

2022-09-01 10:26:05

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

答案 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 中获取上述内容，请在 a 的顶部拖动一个，它将自动设置为按钮的图形。然后选择图像的 url 并将其键入到 ImageView 的“场景构建器”属性窗格中的图像字段中。ImageViewButtonImageView

在 SceneBuilder 中打开上面的 fxml 以查看下图。

lovepotion

备用 css 属性

将 css 替换为属性。-fx-background*

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

这些只是不同，不一定对你想要做的事情更好。这只是一个关于使用哪个的偏好。我发现这些设置比设置更容易使用。它们更具限制性，但语法和选项对我来说更容易理解，并且它们的含义映射到用于标记的JavaDoc API。-fx-background*

有关属性的详细说明，请参阅 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 代码向按钮添加图像的相关解决方案

答案 2

FXML仅用于设计布局，对于样式，您可以使用css并从文件中引用它：FXML

 <stylesheets>
    <URL value="@main.css" />
  </stylesheets>

要将图像添加到：fx:id="btn"css

#btn {          
    -fx-background-image: url("Add.png");
    -fx-background-size: 18 18;
    -fx-background-repeat: no-repeat;
    -fx-background-position:left;   
}

此 Github 存储库提供了一个完整的运行示例：

enter image description here