原文地址http://download.oracle.com/javafx/2.0/layout/builtin_layouts.htm
在JavaFX应用中，当然可以通过指定UI元素的位置和大小属性来手动布局。不过，更简单的方法是使用布局窗格。JavaFX SDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。由于窗口是可以改变大小的，所以布局窗格会根据其包含的结点自动修改位置和大小。
本文是JavaFX布局窗格的概览，并为每个窗格提供了小例子。
边框窗格BorderPane
BorderPane布局窗格提供了5块放置结点的区域：顶部、底部、座部、右部、中部。 Figure 1-1 是能用该布局窗格创建的布局类型。区域可以是任意大小的，如果不需要某一块，可以不定义。
边框窗格对于经典布局很有用，像顶部的工具栏，底部的状态栏，左边的导航面板，右边的补充信息，中间的工作区。
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 窗格的例子。
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);
Example 1-2 中的最后一行创建了一个边框布局，并把HBox加入到顶部区域。结果见 Figure 1-3 .
垂直盒子VBox
VBox 布局窗格和HBox 布局很类似，区别仅仅是垂直盒子的结点是组织进一列中。Figure 1-4 是一个VBox窗格的例子。
Padding属性用来设置结点和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 Example 1-3 中最后一行把VBox窗格加入到了边框布局中的左部。结果见 Figure 1-5 .
堆栈窗格StackPane
StackPane布局窗格把所有结点放进一个堆栈中，新结点都在前一个结点上面。该布局模式可以方便地 在形状和图片上叠加文字或将多种简单形状组合成一个复杂形状。Figure 1-6 是一个帮助图标，是将一个问号放在了具有渐变背景的矩形上面。
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 stackHBox.setHgrow(stack, Priority.ALWAYS); // Give stack any extra spacehbox.getChildren().add(stack); // Add to HBox from Example 1-2
Example 1-4 的最后一行把堆栈窗格加入到了HBox 中，并且让它永远在最右边。结果见Figure 1-7 .
网格窗格GridPane
GridPane 布局窗格可以灵活的创建放置结点的行和列的网络。结点可以放在任何网格细胞中，并且需要时还可以跨细胞。网格窗格用来创建表格或者是任何用行和列组织的布局。Figure 1-8 是一个包含一个图标、小标题、文本和饼图的网格窗格。在图中，gridLinesVisible 属性用来设置显示网格线以看出行和列。该属性对于调试GridPane 布局很有用。
Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。
Example 1-5 creates the grid pane shown in Figure 1-8 .
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 1Text category = new Text("Sales:");category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));grid.add(category, 1, 0); // Title in column 3, row 1Text chartTitle = new Text("Current Year");chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));grid.add(chartTitle, 2, 0);// Subtitle in columns 2-3, row 2Text chartSubtitle = new Text("Goods and Services");grid.add(chartSubtitle, 1, 1, 2, 1);// House icon in column 1, rows 1-2ImageView 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 3Text goodsPercent = new Text("Goods
80%");GridPane.setValignment(goodsPercent, VPos.BOTTOM);grid.add(goodsPercent, 0, 2); // Chart in columns 2-3, row 3ImageView 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 3Text servicesPercent = new Text("Services
20%");GridPane.setValignment(servicesPercent, VPos.TOP);grid.add(servicesPercent, 3, 2);border.setCenter(grid); // Add to BorderPane from Example 1-2Example 1-5 的最后一行把网格布局放到了边框布局的中间。结果见Figure 1-9 .
由于窗口大小的变化，网格成功的结点会根据布局限制重置大小。
流窗格FlowPane
FlowPane布局窗格中的结点会连续放置在窗格的边界集中。结点可以垂直流向 (columns) 或水平流向(rows)。垂直流向窗格具有较高的分界线，水平流向窗格具有较宽的分界线。Figure 1-10 是一个使用了数字图标的水平窗格例子。相反，垂直流向窗格中，第一列会包含1到4，第二列包含5到8。
Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。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 columnsflow.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
Example 1-6 把流窗格放到了边框窗格的右部。结果是Figure 1-11 .
瓦片窗格TilePane
瓦片窗格和流窗格很类似，TilePane 布局窗格中的所有结点都大小相同，放在网格中。结点可以水平放置(in rows) 或垂直放置(in columns)。水平放置的瓦片在宽度宽度方向而垂直的在高度方向。使用prefColumns和 prefRows属性来设置瓦片窗格的首选大小。
Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。
Example 1-7 创建了一个水平瓦片窗格，其效果和Figure 1-10 相同。
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窗格在底部偏右。
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-5AnchorPane.setBottomAnchor(hbox, 8.0);AnchorPane.setRightAnchor(hbox, 5.0);AnchorPane.setTopAnchor(grid, 10.0);border.setCenter(anchorpane); // Add to BorderPane from Example 1-2Example 1-8 最后一行把锚窗格放在了边框窗格中间，取代了先前的结点。结果见Figure 1-13 .
当窗口大小改变时，结点会维持它们原来的相对位置。 Figure 1-14 在按钮在底部，当窗口变低时，按钮也向上移动了。
Figure 1-14 Resized Anchor Pane
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
