JavaFX UI控制元件教程(六)之Toggle Button
在本章中,您將瞭解ToggleButton
該類,這是通過JavaFX API提供的另一種型別的按鈕。
可以將兩個或多個切換按鈕組合成一個組,其中一次只能選擇一個按鈕,或者不需要選擇。圖5-1是組合了三個切換按鈕的應用程式的截圖。應用程式根據選擇的切換按鈕繪製具有特定顏色的矩形。
圖5-1三個切換按鈕
建立切換按鈕
您可以使用ToggleButton
該類的三個建構函式中的任何一個在應用程式中建立一個切換按鈕,如例5-1所示。
示例5-1建立切換按鈕
//A toggle button without any caption or icon ToggleButton tb1 = new ToggleButton(); //A toggle button with a text caption ToggleButton tb2 = new ToggleButton("Press me"); //A toggle button with a text caption and an icon Image image = new Image(getClass().getResourceAsStream("icon.png")); ToggleButton tb3 = new ToggleButton ("Press me", new ImageView(image));
該ToggleButton
班是的擴充套件Labeled
類,因此你可以指定一個文字標題,影象,或兩者圖片和文字。您可以使用類的setText
和setGraphic
方法Labeled
為切換按鈕指定文字和圖形內容。
在程式碼中定義了切換按鈕後,可以將它們組合在一個組中並設定特定的行為。
將切換按鈕新增到組
在實施ToggleButton
類是非常相似的實現RadioButton
類。但是,與單選按鈕不同,切換組中的切換按鈕不會嘗試強制選擇組中的至少一個按鈕。也就是說,單擊所選的切換按鈕會使其取消選中,單擊組中所選的單選按鈕無效。
花點時間研究程式碼片段例5-2。
示例5-2組合組中的切換按鈕
final ToggleGroup group = new ToggleGroup();
ToggleButton tb1 = new ToggleButton("Minor");
tb1.setToggleGroup(group);
tb1.setSelected(true);
ToggleButton tb2 = new ToggleButton("Major");
tb2.setToggleGroup(group);
ToggleButton tb3 = new ToggleButton("Critical");
tb3.setToggleGroup(group);
例5-2setSelected
為tb1切換按鈕呼叫該方法,以便在應用程式啟動時選擇該方法。但是,您可以取消選擇“輕微”切換按鈕,以便在啟動時不在組中選擇切換按鈕,如圖5-2所示。
圖5-2組中的三個切換按鈕
通常,您使用一組切換按鈕為每個按鈕指定特定行為。下一節將介紹如何使用這些切換按鈕來更改矩形的顏色。
設定行為
該類從類setUserData
繼承的方法可幫助您將任何選定的選項與特定值相關聯。在示例5-3中,使用者資料指示應使用哪種顏色來繪製矩形。ToggleButton
Node
示例5-3設定切換按鈕的使用者資料
tb1.setUserData(Color.LIGHTGREEN);
tb2.setUserData(Color.LIGHTBLUE);
tb3.setUserData(Color.SALMON);
final Rectangle rect = new Rectangle(145, 50);
final ToggleGroup group = new ToggleGroup();
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>(){
public void changed(ObservableValue<? extends Toggle> ov,
Toggle toggle, Toggle new_toggle) {
if (new_toggle == null)
rect.setFill(Color.WHITE);
else
rect.setFill(
(Color) group.getSelectedToggle().getUserData()
);
}
});
該ChangeListener<Toggle>
物件檢查組中的選定切換。如果未選擇任何切換按鈕,則矩形將塗上白色。如果選擇了其中一個切換按鈕,則連續呼叫getSelectedToggle
和getUserData
方法將返回一種顏色以繪製矩形。
例如,如果使用者選擇tb2切換按鈕,則setSelectedToggle().getUserData()
呼叫返回Color.LIGHTBLUE
。結果如圖5-3所示。
圖5-3使用切換按鈕繪製矩形
請參閱ToggleButtonSample.java檔案以檢查應用程式的完整程式碼。
造型切換按鈕
您可以通過將CSS樣式應用於切換按鈕來增強此應用程式。在JavaFX 2應用程式中使用CSS類似於在HTML中使用CSS,因為每種情況都基於相同的CSS規範。示例5-4使用該setStyle
方法更改-fx-base
切換按鈕的CSS屬性。
示例5-4將CSS樣式應用於切換按鈕
tb1.setStyle("-fx-base: lightgreen;");
tb2.setStyle("-fx-base: lightblue;");
tb3.setStyle("-fx-base: salmon;");
當新增到應用程式程式碼中時,這些行會更改切換按鈕的可視外觀,如圖5-4所示。
圖5-4繪製的切換按鈕
您可能希望嘗試ToggleButton
該類的其他CSS屬性,或應用JavaFX API中提供的動畫,轉換和視覺效果。
相關的API文件