JavaFX 應(yīng)用程序支持主題通過 CSS 設(shè)置。
主題可以轉(zhuǎn)換整個應(yīng)用程序的外觀,而不改變其功能。
在 JavaFX 中,您可以創(chuàng)建,修改或使用現(xiàn)有主題來應(yīng)用程序。
setUserAgentStylesheet(String URL) 方法接受表示 JavaFX CSS 文件的有效URL字符串。
CSS 文件捆綁在jar應(yīng)用程序內(nèi),或者它們可以駐留在本地文件系統(tǒng)或遠(yuǎn)程 Web 服務(wù)器上。
要從類路徑加載 CSS 文件,請調(diào)用 getClass()。getResource(“path / some_file.css”)。toExternalForm() 方法。它會找到 CSS 文件并產(chǎn)生一個 URL String。
下面的代碼加載 sample.css 文件作為當(dāng)前的外觀。
sample.css 文件和 Java 類位于同一目錄中,因此文件名前面不需要有路徑。
Application.setUserAgentStylesheet(getClass().getResource("sample.css") .toExternalForm());
完整的源代碼。
import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.stage.Stage; public class Main extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { Application.setUserAgentStylesheet(getClass().getResource("sample.css") .toExternalForm()); Group root = new Group(); Scene scene = new Scene(root, 300, 250); primaryStage.setScene(scene); primaryStage.show(); } }
setUserAgentStylesheet() 方法將樣式全局應(yīng)用于應(yīng)用程序擁有的所有場景。
JavaFX 8 目前包含兩個樣式表,Caspian 和 Modena,它們用作默認(rèn)的跨平臺外觀和感覺皮膚。
因為兩個樣式表是預(yù)定義的,您可以使用 setUserAgentStylesheet()方法在它們之間輕松切換。
以下代碼顯示如何在 Caspian 和 Modena 外觀樣式表之間切換。
// Switch to JavaFX 2.x"s CASPIAN Look and Feel. Application.setUserAgentStylesheet(STYLESHEET_CASPIAN); // Switch to JavaFX 8"s Modena Look and Feel. Application.setUserAgentStylesheet(STYLESHEET_MODENA);
我們可以從 jfxrt.jar 文件中提取 CSS 文件 caspian.css 和 modena.css,或者查看位于 http://openjdk.java.net 的 JavaFX 源代碼。
當(dāng)調(diào)用 setUserAgentStylesheet(null) 時,默認(rèn)樣式表 (Modena) 將被自動加載并設(shè)置為當(dāng)前外觀。
對于JavaFX 2.x,默認(rèn)樣式表將是 Caspian。
通過調(diào)用 scene.getStylesheets().add() 方法,我們可以為單個場景及其子節(jié)點設(shè)置樣式。
我們將傳遞一個表示 JavaFX CSS 文件的 URL 字符串。
以下代碼調(diào)用 setUserAgentStylesheet(null) 加載 Modena 作為外觀,然后通過調(diào)用 getStylesheets()。add() 方法設(shè)置場景的其他樣式。
Application.setUserAgentStylesheet(null); // defaults to Modena // apply custom look and feel to the scene. scene.getStylesheets() .add(getClass().getResource("my_cool_skin.css") .toExternalForm());
類似于 HTML5 使用 CSS 樣式表的方式,在場景圖上有與 N??ode 對象相關(guān)聯(lián)的選擇器或樣式類。
所有 JavaFX 場景圖形節(jié)點分別有 setId(),getStyleClass()。add() 和 setStyle() 方法來應(yīng)用可以改變節(jié)點的背景顏色,邊框,筆畫等的樣式。
選擇器在場景圖上定位 JavaFX 節(jié)點,然后我們可以使用 CSS 樣式定義對它們進(jìn)行樣式化。
兩種類型的選擇器類型是 id
和 class
。
id 選擇器是在場景節(jié)點上設(shè)置的唯一字符串名稱。
類選擇器是一個字符串名稱,可以作為標(biāo)記添加到任何 JavaFX 節(jié)點。
類選擇器與 Java 類的概念無關(guān)。類選擇器用于對節(jié)點進(jìn)行分組以將它們與一個CSS樣式定義一起設(shè)置樣式。
id 選擇器是賦值給節(jié)點的唯一字符串名稱。當(dāng)使用 id 選擇器時,我們將調(diào)用 JavaFX 節(jié)點對象上的 setId(String ID) 方法來設(shè)置其id。
例如,要定位 id 為 my-button 的 Button 實例,您將調(diào)用 setId(“my-button”) 方法。
要為按鈕設(shè)置 id 為 my-button 的樣式,您將創(chuàng)建一個用 id 聲明的 CSS 樣式定義塊 selector#my-button,如下所示:
#my-button { -fx-text-fill: rgba(17, 145, 213); -fx-border-color: rgba(255, 255, 255, .80); -fx-border-radius: 8; -fx-padding: 6 6 6 6; }
此 CSS 樣式塊將應(yīng)用于具有 my-button
的唯一標(biāo)識的按鈕。
CSS 選擇器名稱前面帶有#符號,而 Java 代碼中的 id 不使用 # 符號。
當(dāng)使用類類型選擇器時,我們將調(diào)用 getStyleClass()。add(String styleClass) 方法向節(jié)點添加一個選擇器。該方法允許我們有多個樣式類來對節(jié)點進(jìn)行樣式。
getStyleClass()方法返回一個ObservableList,我們可以添加和刪除樣式類來動態(tài)更新它的外觀。
以下代碼通過getStyleClass().add("num-button")
方法定位樣式類包含num-button
的按鈕。
以下是用類選擇器聲明的 CSS 樣式定義塊 .num-button
:
.num-button { -fx-background-color: white, rgb(189,218,230), white; -fx-background-radius: 50%; -fx-background-insets: 0, 1, 2; -fx-font-family: "Helvetica"; -fx-text-fill: black; -fx-font-size: 20px; }
此 CSS 樣式塊將應(yīng)用于具有樣式類 num-button
的按鈕。
CSS 選擇器名稱以.
號為前綴,而 Java 代碼中的選擇器不使用。符號。
選擇器可以有模式來遍歷場景圖的節(jié)點從根節(jié)點到子節(jié)點的層次結(jié)構(gòu)。
我們可以對父節(jié)點是某種類型的子節(jié)點進(jìn)行樣式化。以下代碼顯示了如何設(shè)置所有按鈕的樣式,其父對象是HBox。
.hbox > .button { -fx-text-fill: black; }
選擇器模式 .hbox>
.button styles 作為 HBox 的后代的 Button 節(jié)點。兩個選擇器之間的大于符號允許系統(tǒng)知道要對哪些節(jié)點進(jìn)行樣式。
JavaFX 節(jié)點的選擇器都是小寫字母,如果控件具有多個字,則它們用連字符分隔。例如,GridPane 的類選擇器將是 .grid-pane
。
我們還可以使用公共屬性來為兩種不同類型的節(jié)點設(shè)置樣式。以下代碼顯示如何為所有標(biāo)簽和文本節(jié)點設(shè)置樣式。
.label,.text { -fx-font-size: 20px; }
更多建議: