Button通過JavaFX API提供的類使開發人員能夠在使用者單擊按鈕時處理操作。該Button班是的擴充套件Labeled類。它可以顯示文字，影象或兩者。圖3-1顯示了具有各種效果的按鈕。在本章中，您將學習如何建立這些按鈕型別。

圖3-1按鈕型別

建立一個按鈕

您可以Button使用Button類的三個建構函式在JavaFX應用程式中建立控制元件，如示例3-1所示。

示例3-1建立按鈕

//A button with an empty text caption.
Button button1 = new Button();
//A button with the specified text caption.
Button button2 = new Button("Accept");
//A button with the specified text caption and icon.
Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));
Button button3 = new Button("Accept", new ImageView(imageOk));
 

因為Button類擴充套件了Labeled類，所以可以使用以下方法為沒有圖示或文字標題的按鈕指定內容：

• 該setText(String text)方法-指定按鈕上的文字標題

• 所述setGraphic(Node graphic)方法-指定圖形圖示

示例3-2顯示瞭如何建立帶圖示但沒有文字標題的按鈕。

示例3-2向按鈕新增圖示

Image imageDecline = new Image(getClass().getResourceAsStream("not.png"));
Button button5 = new Button();
button5.setGraphic(new ImageView(imageDecline));
 

新增到應用程式後，此程式碼片段將生成如圖3-2所示的按鈕。

圖3-2帶圖示的按鈕

在例3-2和圖3-2中，圖示是一個ImageView物件。但是，您可以使用其他圖形物件，例如，包含在javafx.scene.shape包中的形狀。為按鈕定義文字和圖形內容時，可以使用該setGraphicTextGap方法設定它們之間的間隙。

Button該類的預設外觀區分按鈕的以下可視狀態。圖3-3顯示了帶圖示的按鈕的預設狀態。

圖3-3按鈕狀態

分配動作

每個按鈕的主要功能是在單擊時生成動作。使用類的setOnAction方法Button來定義使用者單擊按鈕時將發生的情況。

示例3-3定義按鈕的操作

button2.setOnAction(new EventHandler<ActionEvent>() {
    @Override public void handle(ActionEvent e) {
        label.setText("Accepted");
    }
});

ActionEvent是由...處理的事件型別EventHandler。一個EventHandler物件提供了handle以處理燒製一個按鈕的操作方法。示例3-3顯示瞭如何覆蓋該handle方法，以便當使用者按下button2時，標籤的文字標題設定為“已接受”。

您可以使用Button該類設定所需數量的事件處理方法，以引起特定行為或應用視覺效果。

應用效果

因為Button類擴充套件了Node類，所以可以應用javafx.scene.effect包中的任何效果來增強按鈕的視覺外觀。在示例3-4中，DropShadow當onMouseEntered事件發生時，效果應用於button3 。

示例3-4應用DropShadow效果

DropShadow shadow = new DropShadow();
//Adding the shadow when the mouse cursor is on
button3.addEventHandler(MouseEvent.MOUSE_ENTERED, 
    new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent e) {
            button3.setEffect(shadow);
        }
});
//Removing the shadow when the mouse cursor is off
button3.addEventHandler(MouseEvent.MOUSE_EXITED, 
    new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent e) {
            button3.setEffect(null);
        }
});

圖3-4顯示了當滑鼠游標在其上時以及何時關閉時按鈕3的狀態。

圖3-4帶投影的按鈕

造型按鈕

增強按鈕視覺外觀的下一步是應用由Skin類定義的CSS樣式。在JavaFX 2應用程式中使用CSS類似於在HTML中使用CSS，因為每種情況都基於相同的CSS規範。

您可以在單獨的CSS檔案中定義樣式，並使用該setStyleClass方法在應用程式中啟用它們。此方法繼承自Node該類，可用於所有UI控制元件。或者，您可以使用該setStyle方法直接在程式碼中定義按鈕的樣式。例3-5和圖3-4說明了後一種方法。

示例3-5設定按鈕樣式

button1.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");

該-fx-font-size屬性設定button1的字型大小。該-fx-base屬性會覆蓋應用於按鈕的預設顏色。結果，button1為淺綠色，文字大小較大，如圖3-5所示。

圖3-5使用CSS設定樣式的按鈕

相關的API文件