翻譯自??Separator

本章介紹如何使用分隔符組織JavaFX應用程序的UI組件。

SeparatorJavaFX API中可用的類表示水平或垂直分隔線。它用于劃分應用程序用戶界面的元素，不會產生任何操作。但是，您可以設置樣式，對其應用視覺效果，甚至為其設置動畫。默認情況下，分隔符是水平的。您可以使用該setOrientation方法更改其方向。

創建分隔符

例15-1中的代碼片段創建了一個水平分隔符和一個垂直分隔符。

例15-1垂直和水平分隔符

//Horizontal separator Separator separator1 = new Separator(); //Vertical separator Separator separator2 = new Separator(); separator2.setOrientation(Orientation.VERTICAL);

該Separator班是的擴展Node類。因此，分隔符繼承Node該類的所有實例變量。

通常，分隔符用于劃分UI控件的組。研究例15-2中所示的代碼片段。它將彈簧月復選框與夏月復選框分開。

示例15-2在復選框類別之間使用分隔符

final String[] names = new String[]{"March", "April", "May","June", "July", "August"}; final CheckBox[] cbs = new CheckBox[names.length]; final Separator separator = new Separator(); final VBox vbox = new VBox();for (int i = 0; i < names.length; i++) {cbs[i] = new CheckBox(names[i]); }separator.setMaxWidth(40); separator.setAlignment(Pos.CENTER_LEFT); vbox.getChildren().addAll(cbs); vbox.setSpacing(5); vbox.getChildren().add(3, separator);

將此代碼片段添加到應用程序時，會生成如圖15-1所示的控件。

圖15-1復選框和分隔符

分隔符占用分配給它的完整水平或垂直空間。該setMaxWidth方法用于定義特定寬度。該setValignment方法指定分隔符在分配的布局空間內的垂直位置。同樣，您可以通過應用setHalignment方法設置分隔線的水平位置。

在例15-2中，通過使用專用方法將分隔符添加到垂直框中add(index, node)。您可以在應用程序中使用此方法在創建UI之后或動態更改UI時包含分隔符。

?

將分隔符添加到應用程序的UI中

如前所述，分隔符可用于劃分UI控件組。您還可以使用它們來構建用戶界面。考慮渲染天氣預報數據的任務，如圖15-2所示。

圖15-2使用分隔符構建天氣預報數據

對于圖15-2中所示的應用程序，分隔符用于劃分Label和ImageView對象。研究例15-3中所示的該應用程序的源代碼。

示例15-3在天氣預報應用程序中使用分隔符

import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Orientation; import javafx.geometry.VPos; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.text.Font; import javafx.stage.Stage;public class Main extends Application {Label caption = new Label("Weather Forecast");Label friday = new Label("Friday");Label saturday = new Label("Saturday");Label sunday = new Label("Sunday");@Overridepublic void start(Stage stage) {Group root = new Group();Scene scene = new Scene(root, 500, 300);stage.setScene(scene);stage.setTitle("Separator Sample");GridPane grid = new GridPane();grid.setPadding(new Insets(10, 10, 10, 10));grid.setVgap(2);grid.setHgap(5);scene.setRoot(grid);Image cloudImage = new Image(getClass().getResourceAsStream("cloud.jpg"));Image sunImage = new Image(getClass().getResourceAsStream("sun.jpg"));caption.setFont(Font.font("Verdana", 20));GridPane.setConstraints(caption, 0, 0);GridPane.setColumnSpan(caption, 8);grid.getChildren().add(caption);final Separator sepHor = new Separator();sepHor.setValignment(VPos.CENTER);GridPane.setConstraints(sepHor, 0, 1);GridPane.setColumnSpan(sepHor, 7);grid.getChildren().add(sepHor);friday.setFont(Font.font("Verdana", 18));GridPane.setConstraints(friday, 0, 2);GridPane.setColumnSpan(friday, 2);grid.getChildren().add(friday);final Separator sepVert1 = new Separator();sepVert1.setOrientation(Orientation.VERTICAL);sepVert1.setValignment(VPos.CENTER);sepVert1.setPrefHeight(80);GridPane.setConstraints(sepVert1, 2, 2);GridPane.setRowSpan(sepVert1, 2);grid.getChildren().add(sepVert1);saturday.setFont(Font.font("Verdana", 18));GridPane.setConstraints(saturday, 3, 2);GridPane.setColumnSpan(saturday, 2);grid.getChildren().add(saturday);final Separator sepVert2 = new Separator();sepVert2.setOrientation(Orientation.VERTICAL);sepVert2.setValignment(VPos.CENTER);sepVert2.setPrefHeight(80);GridPane.setConstraints(sepVert2, 5, 2);GridPane.setRowSpan(sepVert2, 2);grid.getChildren().add(sepVert2);sunday.setFont(Font.font("Verdana", 18));GridPane.setConstraints(sunday, 6, 2);GridPane.setColumnSpan(sunday, 2);grid.getChildren().add(sunday);final ImageView cloud = new ImageView(cloudImage);GridPane.setConstraints(cloud, 0, 3);grid.getChildren().add(cloud);final Label t1 = new Label("16");t1.setFont(Font.font("Verdana", 20));GridPane.setConstraints(t1, 1, 3);grid.getChildren().add(t1);final ImageView sun1 = new ImageView(sunImage);GridPane.setConstraints(sun1, 3, 3);grid.getChildren().add(sun1);final Label t2 = new Label("18");t2.setFont(Font.font("Verdana", 20));GridPane.setConstraints(t2, 4, 3);grid.getChildren().add(t2);final ImageView sun2 = new ImageView(sunImage);GridPane.setConstraints(sun2, 6, 3);grid.getChildren().add(sun2);final Label t3 = new Label("20");t3.setFont(Font.font("Verdana", 20));GridPane.setConstraints(t3, 7, 3);grid.getChildren().add(t3);stage.show();}public static void main(String[] args) {launch(args);} }

此應用程序使用水平和垂直分隔符，并使分隔符跨越GridPane容器中的行和列。在您的應用程序中，您還可以設置分隔符的首選長度（水平分隔符的寬度和垂直分隔符的高度），以便在用戶界面調整大小時動態更改。您還可以通過應用可用于Separator對象的CSS類來更改分隔符的可視外觀。

?

造型分隔符

若要將相同的樣式應用于示例15-3中的所有分隔符，請創建CSS文件（例如，controlStyle.css）并將此文件保存在與應用程序的主類相同的包中。例15-4演示了可以添加到controlStyle文件的CSS類。

示例15-4使用CSS類來設置樣式分隔符

/*controlStyle.css */.separator{-fx-background-color: #e79423;-fx-background-radius: 2; }

您可以通過類的getStylesheets方法在應用程序中啟用分隔符樣式Scene，如例15-5所示。

示例15-5在JavaFX應用程序中啟用樣式表

scene.getStylesheets().add("separatorsample/controlStyle.css");

圖15-3顯示了編譯和運行修改后的應用程序時天氣預報中的分隔符的外觀。

圖15-3樣式分隔符

?

相關的API文檔?

• Separator

• JavaFX CSS規范

總結

以上是生活随笔為你收集整理的JavaFX UI控件教程（十六）之Separator的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。