.

.

在JavaFX中使用布局

一、用内置布局窗格

一个JavaFx应用可以通过设置每个UI元素的位置和大小来手动地布局用户界面。但是，一个更简单的做法是使用布局窗格。JavaFx SDK提供了多种布局容器类，叫做窗格，它们可简化对一些经典布局的设置和管理，例如行、列、堆叠、平铺等等。当窗口缩放时，布局窗格会自动地根据节点属性重设其包含的所有节点的位置和大小。

本话题为JavaFx layout包中提供的的每个布局窗格都给出了相应的概述和简单的示例。 LayoutSample.java文件包含了本话题中UI的源码。 LayoutSample.zip文件包含了示例应用的NetBeans工程。

BorderPane

BorderPane布局窗格提供了5个放置节点的区域：top, bottom, left, right, 和 center。 图 1-1展示了border pane构建的布局样式。这些区域可以是任意大小，如果应用不需要某个区域，你可以不定义它，然后窗格就不会给这个区域分配空间。

图 1-1 Border Pane 示例

?

border pane可用于这种经典的外观：top:工具栏，bottom:状态栏，left:导航栏，right:附加信息，center:工作区。

默认情况下，如果窗口比所有区域所需空间还大，多余的空间将被分配给中间区域。如果窗口比所需空间小，区域可能会重叠。重叠是由区域设置的顺序决定的。例如，如果区域设置的顺序是 left, bottom, right，当窗口变得更小时，bottom区域会覆盖left区域，right区域会覆盖bottom区域。如果区域设置的顺序是 left, right, bottom，当窗口变得更小时，bottom区域会覆盖left和right区域。

例 1-1?展示了布局示例应用中创建border pane的代码。创建每个区域用到的布局窗格的函数会在本话题的剩余部分介绍。

例 1-1 创建一个 Border Pane

BorderPane border = new BorderPane();
HBox hbox = addHBox()
border.setTop(hbox);
border.setLeft(addVBox());
addStackPane(hbox); // 在top区域的HBox中添加stack pane
?
border.setCenter(addGridPane());
border.setRight(addFlowPane());

注意一点，在本例中，border pane的bottom区域并没有被使用。如果你想要在bottom区域中添加什么，可以使用下面的语句并且替换其中的节点node为你选择的控件。

border.setBottom(node);
HBox

HBox?布局窗格可以让你很容易地将一系列节点排列到一行中。 图 1-2?展示了一个?HBox?窗格的例子.

图 1-2 HBox 窗格示例

?

Padding 属性可以设置节点到?HBox?边缘的距离。 Spacing 可以管理节点之间的距离。Style可用来改变背景色。

例 1-2?为一个工具栏创建了一个包含两个按钮的?HBox?窗格。

例 1-2 创建一个 HBox 窗格

public HBox addHBox() {
HBox hbox = new HBox();
hbox.setPadding(new Insets(15, 12, 15, 12));
hbox.setSpacing(10);
hbox.setStyle("-fx-background-color: #336699;");
?
Button buttonCurrent = new Button("Current");
buttonCurrent.setPrefSize(100, 20);
?
Button buttonProjected = new Button("Projected");
buttonProjected.setPrefSize(100, 20);
hbox.getChildren().addAll(buttonCurrent, buttonProjected);
?
return hbox;
}

例 1-1中的?setTop()?函数将这个?HBox?窗格添加到border pane的top区域。其结果展示在 图 1-3中。

图 1-3 Border Pane 中的? HBox Pane

?

VBox

VBox?布局窗格和?HBox?很相似，除了这里所有节点是被排列到一个