原文地址http://download.oracle.com/javafx/2.0/layout/builtin_layouts.htm
在JavaFX应用中，当然可以通过指定UI元素的位置和大小属性来手动布局。不过，更简单的方法是使用布局窗格。JavaFX SDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。由于窗口是可以改变大小的，所以布局窗格会根据其包含的结点自动修改位置和大小。
本文是JavaFX布局窗格的概览，并为每个窗格提供了小例子。
边框窗格BorderPane
BorderPane布局窗格提供了5块放置结点的区域：顶部、底部、座部、右部、中部。
是能用该布局窗格创建的布局类型。区域可以是任意大小的，如果不需要某一块，可以不定义。
Figure 1-1 Sample Border Pane
Description of "Figure 1-1 Sample Border Pane"边框窗格对于经典布局很有用，像顶部的工具栏，底部的状态栏，左边的导航面板，右边的补充信息，中间的工作区。
Example 1-1创建了一个每个区域是有色矩形的边框窗格。
Example 1-1 Create a Border Pane
BorderPane layout = new BorderPane();
layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));
layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));
layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));
layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));
layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));
水平盒子HBox
HBox
布局窗格提供了一种简单的方法来把一些列结点放进单行里面。
Figure 1-2是
一个HBox
窗格的例子。
Figure 1-2 Sample HBox Pane
Description of "Figure 1-2 Sample HBox Pane"Padding属性用来设置结点和
HBox的边缘间距离。
Spacing属性用来设置结点间距离。style用来改变背景色。
Example 1-2创建了一个工具栏的
HBox
窗格，里面有两个按钮。
Example 1-2 Create an HBox Pane
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);
BorderPane border = new BorderPane();
border.setTop(hbox);
中的最后一行创建了一个边框布局，并把
HBox加入到顶部区域。结果见
.
Figure 1-3 HBox Pane in a Border Pane
Description of "Figure 1-3 HBox Pane in a Border Pane"垂直盒子VBox
VBox
布局窗格和
HBox
布局很类似，区别仅仅是垂直盒子的结点是组织进一列中。
Figure 1-4是一个
VBox窗格的例子。
Figure 1-4 Sample VBox Pane
Description of "Figure 1-4 Sample VBox Pane"VBox的边缘间距离。
Spacing属性用来设置结点间距离。
Example 1-3创建了一个选项列表
VBox。
Example 1-3 Create a VBox Pane
VBox vbox = new VBox();
vbox.setPadding(new Insets(10, 10, 10, 10));
vbox.setSpacing(10);
Text title = new Text("Data");
title.setFont(Font.font("Amble CN", FontWeight.BOLD, 14));
vbox.getChildren().add(title);
Text options[] = new Text[] {
new Text(" Sales"),
new Text(" Marketing"),
new Text(" Distribution"),
new Text(" Costs")};
for (int i=0; i<4; i++) {
vbox.getChildren().add(options[i]);
}
border.setLeft(vbox); // Add to BorderPane from Example 1-2 中最后一行把
VBox窗格加入到了边框布局中的左部。结果见
Figure 1-5 VBox Pane in a Border Pane
Description of "Figure 1-5 VBox Pane in a Border Pane"堆栈窗格StackPane
StackPane布局窗格把所有结点放进一个堆栈中，新结点都在前一个结点上面。该布局模式可以方便地
在形状和图片上叠加文字或将多种简单形状组合成一个复杂形状。
Figure 1-6是一个帮助图标，是将一个问号放在了具有渐变背景的矩形上面。
Figure 1-6 Sample Stack Pane
Description of "Figure 1-6 Sample Stack Pane" Example 1-4为帮助图标创建了堆栈窗格。
Example 1-4 Create a Stack Pane
StackPane stack = new StackPane();
Rectangle helpIcon = new Rectangle(35.0, 25.0);
helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,
new Stop[]{
new Stop(0,Color.web("#4977A3")),
new Stop(0.5, Color.web("#B0C6DA")),
new Stop(1,Color.web("#9CB6CF")),}));
helpIcon.setStroke(Color.web("#D0E6FA"));
helpIcon.setArcHeight(3.5);
helpIcon.setArcWidth(3.5);
Text helpText = new Text("? ");
helpText.setFont(Font.font("Amble Cn", FontWeight.BOLD, 18));
helpText.setFill(Color.WHITE);
helpText.setStroke(Color.web("#7080A0"));
stack.getChildren().addAll(helpIcon, helpText);
stack.setAlignment(Pos.CENTER_RIGHT); // Right-justify nodes in stack
HBox.setHgrow(stack, Priority.ALWAYS); // Give stack any extra space
hbox.getChildren().add(stack); // Add to HBox from Example 1-2 的最后一行把堆栈窗格加入到了
HBox
中，并且让它永远在最右边。结果见
Figure 1-7Figure 1-7 Stack Pane in an HBox Pane
Description of "Figure 1-7 Stack Pane in an HBox Pane"网格窗格GridPane
GridPane
布局窗格可以灵活的创建放置结点的行和列的网络。结点可以放在任何网格细胞中，并且需要时还可以跨细胞。网格窗格用来创建表格或者是任何用行和列组织的布局。
Figure 1-8是一个包含一个图标、小标题、文本和饼图的网格窗格。在图中，
gridLinesVisible
属性用来设置显示网格线以看出行和列。该属性对于调试
GridPane
布局很有用。
Figure 1-8 Sample Grid Pane
Description of "Figure 1-8 Sample Grid Pane"Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。
Example 1-5creates the grid pane shown in
Example 1-5 Create a Grid Pane
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 0, 0, 10));
// Category in column 2, row 1
Text category = new Text("Sales:");
category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(category, 1, 0);
// Title in column 3, row 1
Text chartTitle = new Text("Current Year");
chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(chartTitle, 2, 0);
// Subtitle in columns 2-3, row 2
Text chartSubtitle = new Text("Goods and Services");
grid.add(chartSubtitle, 1, 1, 2, 1);
// House icon in column 1, rows 1-2
ImageView imageHouse = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));
grid.add(imageHouse, 0, 0, 1, 2);
// Left label in column 1 (bottom), row 3
Text goodsPercent = new Text("Goods\n80%");
GridPane.setValignment(goodsPercent, VPos.BOTTOM);
grid.add(goodsPercent, 0, 2);
// Chart in columns 2-3, row 3
ImageView imageChart = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));
grid.add(imageChart, 1, 2, 2, 1);
// Right label in column 4 (top), row 3
Text servicesPercent = new Text("Services\n20%");
GridPane.setValignment(servicesPercent, VPos.TOP);
grid.add(servicesPercent, 3, 2);
border.setCenter(grid); // Add to BorderPane from Example 1-2 的最后一行把网格布局放到了边框布局的中间。结果见
Figure 1-9Figure 1-9 Grid Pane in a Border Pane
Description of "Figure 1-9 Grid Pane in a Border Pane"由于窗口大小的变化，网格成功的结点会根据布局限制重置大小。
流窗格FlowPane
FlowPane布局窗格中的结点会连续放置在窗格的边界集中。结点可以垂直流向
(columns) 或水平流向(rows)。垂直流向窗格具有较高的分界线，水平流向窗格具有较宽的分界线。
Figure 1-10是一个使用了数字图标的水平窗格例子。相反，垂直流向窗格中，第一列会包含1到4，第二列包含5到8。
Figure 1-10 Sample Horizontal Flow Pane
Description of "Figure 1-10 Sample Horizontal Flow Pane" Example 1-6创建了一些列图标的水平流窗格。
Example 1-6 Create a Flow Pane
FlowPane flow = new FlowPane();
flow.setPadding(new Insets(5, 0, 5, 0));
flow.setVgap(4);
flow.setHgap(4);
flow.setPrefWrapLength(170); // preferred width allows for two columns
flow.setStyle("-fx-background-color: DAE6F3");
ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
pages[i] = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
flow.getChildren().add(pages[i]);
}
border.setRight(flow); // Add to BorderPane from Example 1-2 把流窗格放到了边框窗格的右部。结果是
Figure 1-11Figure 1-11 Flow Pane in a Border Pane
Description of "Figure 1-11 Flow Pane in a Border Pane"瓦片窗格TilePane
瓦片窗格和流窗格很类似，
TilePane
布局窗格中的所有结点都大小相同，放在网格中。结点可以水平放置(in rows) 或垂直放置(in columns)。水平放置的瓦片在宽度宽度方向而垂直的在高度方向。
使用prefColumns和
prefRows属性来设置瓦片窗格的首选大小。
创建了一个水平瓦片窗格，其效果和
相同。
Example 1-7 Create a Tile Pane
TilePane tile = new TilePane();
tile.setPadding(new Insets(5, 0, 5, 0));
tile.setVgap(4);
tile.setHgap(4);
tile.setPrefColumns(2);
tile.setStyle("-fx-background-color: DAE6F3");
ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
pages[i] = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
tile.getChildren().add(pages[i]);
}
锚窗格AnchorPane
AnchorPane
布局窗格用来在窗格的上下左右中固定结点。当窗口大小改变时，结点会维持它们原来的相对位置。一个结点可以赋予多个位置，一个位置也可以赋予多个结点。
Figure 1-12是一个锚窗格，网格窗格在顶部，有两个按钮的
HBox窗格在底部偏右。
Figure 1-12 Sample Anchor Pane
Description of "Figure 1-12 Sample Anchor Pane" Example 1-8照上面创建了一个锚窗格。
Example 1-8 Create an Anchor Pane
AnchorPane anchorpane = new AnchorPane();
Button buttonSave = new Button("Save");
Button buttonCancel = new Button("Cancel");
HBox hbox = new HBox();
hbox.setPadding(new Insets(0, 10, 10, 10));
hbox.setSpacing(10);
hbox.getChildren().addAll(buttonSave, buttonCancel);
anchorpane.getChildren().addAll(grid,hbox); // Add grid from Example 1-5
AnchorPane.setBottomAnchor(hbox, 8.0);
AnchorPane.setRightAnchor(hbox, 5.0);
AnchorPane.setTopAnchor(grid, 10.0);
border.setCenter(anchorpane); // Add to BorderPane from Example 1-2 最后一行把锚窗格放在了边框窗格中间，取代了先前的结点。结果见
Figure 1-13Figure 1-13 Anchor Pane in a Border Pane
Description of "Figure 1-13 Anchor Pane in a Border Pane"当窗口大小改变时，结点会维持它们原来的相对位置。
Figure 1-14在按钮在底部，当窗口变低时，按钮也向上移动了。
Figure 1-14 Resized Anchor Pane
Description of "Figure 1-14 Resized Anchor Pane"![测试基础第一课[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)