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

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

仅用于设计布局，对于样式设置，您可以使用并从

FXML

文件中引用它：

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

这提供了一个完整的运行示例：

仅使用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>

---

仅使用Java代码向按钮添加图像的相关解决方案

---

我对css示例做了一些更改（参考注释3中的#btn{）：

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

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

---

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

Add.png将位于何处？@AndrewS它将与CSS@jewelsea你在例子中使用的这些爱情按钮是怎么回事？：）@BarbaraKwarc必须分享爱情：-）“一支蜡烛可以点燃数千支蜡烛，一支蜡烛的寿命不会缩短。分享幸福永远不会减少。”@jewelsea发现这些美丽的线条是多么奇怪的地方啊。：）

<?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>

<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>

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