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

Question

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

Answer 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中获取上述内容,请在aImageView顶部拖动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参考指南.

下面是一个样式设置fxml中嵌入图形的示例,尽管将样式信息分离到tarrsalah样本中的单独css样式表总是更好.

<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 - 使用图像创建自定义按钮
• 将图像添加到JavaFX特定位置的按钮

Answer 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存储库提供了一个完整的运行示例: