BorderPane
非常適合開發更復雜的布局。 通常, BorderPane
提供五個不同的區域:頂部,右側,底部,左側和中央。 您可以通過調用setTop/setBottom/set…
方法將Node
設置到每個區域。 這種方法使開發“類似于網站”的應用程序窗口變得非常容易,您可以在其中的菜單欄或工具欄在頂部,左側導航,在底部有某種頁腳,在中心區域顯示您的主要內容右側的其他信息。 重要的是要知道,每個區域的大小都不同:
- 頂部和底部區域將調整為其子級的首選高度,并占用其寬度的所有可用空間。
- 左側和右側區域將調整其子級的首選寬度,并占用其高度的所有可用空間。
- 中心區域占用了其高度和寬度的所有可用空間。
下圖演示了調整應用程序窗口大小時BorderPane
的行為:
![]() |
資料來源:自己的插圖 |
/*** Created on: 29.03.2012* @author Sebastian Damm*/
public class BorderPaneExample extends Application
{private BorderPane root;@Overridepublic void start(Stage primaryStage) throws Exception{root = new BorderPane(); root.setTop(getMenu());root.setRight(getRightHBox());root.setBottom(getFooter());root.setLeft(getLeftHBox());root.setCenter(getCenterPane());Scene scene = new Scene(root, 900, 500); primaryStage.setTitle("BorderPane Example");primaryStage.setScene(scene);primaryStage.show(); }private MenuBar getMenu(){MenuBar menuBar = new MenuBar();Menu menuFile = new Menu("File"); Menu menuEdit = new Menu("Edit");Menu menuHelp = new Menu("Help"); menuBar.getMenus().addAll(menuFile, menuEdit, menuHelp);return menuBar;}private HBox getRightHBox(){HBox hbox = new HBox();VBox vbox = new VBox(50);vbox.setPadding(new Insets(0, 20, 0, 20));vbox.setAlignment(Pos.CENTER);vbox.getChildren().addAll(new Text("Additional Info 1"), new Text("Additional Info 2"), new Text("Additional Info 3")); hbox.getChildren().addAll(new Separator(Orientation.VERTICAL), vbox); return hbox;}private HBox getLeftHBox(){HBox hbox = new HBox();VBox vbox = new VBox(10);vbox.setPadding(new Insets(10));Text text = new Text("Navigation");text.setFont(Font.font("Helvetica", FontWeight.BOLD, 20));VBox vboxText = new VBox(10);for (int i = 1; i >= 10; i++){vboxText.getChildren().add(new Text("Category " + i));} vboxText.setTranslateX(10);vbox.getChildren().addAll(text, vboxText); hbox.getChildren().addAll(vbox, new Separator(Orientation.VERTICAL));return hbox;}private VBox getFooter(){VBox vbox = new VBox();HBox hbox = new HBox(20);hbox.setPadding(new Insets(5));hbox.setAlignment(Pos.CENTER);hbox.getChildren().addAll(new Text("Footer Item 1"), new Text("Footer Item 2"), new Text("Footer Item 3")); vbox.getChildren().addAll(new Separator(), hbox);return vbox;}private StackPane getCenterPane(){StackPane stackPane = new StackPane();stackPane.setAlignment(Pos.CENTER);Rectangle rec = new Rectangle(200, 200);rec.setFill(Color.DODGERBLUE);rec.widthProperty().bind(stackPane.widthProperty().subtract(50));rec.heightProperty().bind(stackPane.heightProperty().subtract(50));stackPane.getChildren().addAll(rec);return stackPane;}public static void main(String[] args){Application.launch(args);}
}
這個小應用程序展示了如何使用BorderPane
。 在start
方法中,我們僅使用BorderPane
類的各種set…
方法,以便使用Node
填充每個區域。
頂部區域充滿了MenuBar
。 在這里,我簡單地創建一個帶有三個不同Menus
的MenuBar
。 在我的下一篇文章中,我將深入介紹JavaFX中菜單的創建。
除了菜單外,代碼的一個方面可能對您來說是新的。 請看一下第100行:
BorderPane
的中心區域填充了一個擁有Rectangle
的StackPane
。 由于Rectangle
不會直接使用其父對象(如所有Shape
對象)直接調整大小,因此,當我們想調整Rectangle
大小時,我們必須采用其他方法。 這就是為什么我將Rectangle
的寬度和高度綁定到StackPane
的寬度和高度(減去50個像素)的原因。 更改StackPanes
的大小時, Rectangle
將相應地自動調整大小。
這是有關應用程序外觀和大小調整的三張圖片:



如您所見, BorderPane
的不同區域BorderPane
根據我在本文頂部說明的規則進行相應調整。
參考: JavaFX 2.0布局窗格–來自我們JCG合作伙伴 Sebastian Damm的BorderPane在Java博客上的Just my 2 cents 。
翻譯自: https://www.javacodegeeks.com/2012/07/javafx-20-layout-panes-borderpane.html