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