僅使用FXML設計JavaFX 2按鈕 - 如何將圖像添加到按鈕？

Question

我想改變一個按鈕的樣式，這裏的大多數線程和互聯網上的文章展示瞭如何使用Java代碼來實現它，我不認爲它是一個真正的好方案，有沒有什麼辦法例如，通過僅使用FXML（無Css）來設置一個帶有一些文本和圖像的按鈕？

Answer 1

解決方案

由於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屬性

替代的CSS到-fx-background*屬性。

• -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代碼

• JavaFX - create custom button with image
• Add image to a button at a specific position JavaFX

Answer 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提供了一個完整的運行示例：

只使用FXML

Answer 3

一些改動我的CSS例子進行圖像按鈕相關的解決方案（參考#btn {in評論＃3）：

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

這刪除了按鈕輪廓，只留下圖像。我能夠像SceneView一樣調整Scene Builder中的按鈕選擇器，並實時查看圖片變化。我添加了一個工具提示來解釋圖像，因爲沒有文本和按鈕輪廓。我打算使用其他地方解釋的技術，並在點擊時更改圖像以提供更多視覺反饋，即圖像是按鈕。

另請注意：我需要在'CSS Id'（場景構建器）中指定按鈕ID，而不是'fx：id'以使它們鏈接。

將上述變化添加到上面解釋的內容中，可以實現我的目標：有一個只與圖像相似的按鈕（例如方形按鈕中的圓形）。