在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

1. BorderPane border = new BorderPane();

2. HBox hbox = addHBox()

3. border.setTop(hbox);

4. border.setLeft(addVBox());

5. addStackPane(hbox); // 在top区域的HBox中添加stack pane

7. border.setCenter(addGridPane());

8. border.setRight(addFlowPane());

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

1. border.setBottom(node);

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

图 1-2 HBox 窗格示例

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

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

例 1-2 创建一个 HBox 窗格

1. public HBox addHBox() {

2. HBox hbox = new HBox();
   

3. hbox.setPadding(new Insets(15, 12, 15, 12));
   

4. hbox.setSpacing(10);
   

5. hbox.setStyle("-fx-background-color: #336699;");
   

7. Button buttonCurrent = new Button("Current");
   

8. buttonCurrent.setPrefSize(100, 20);
   

10. Button buttonProjected = new Button("Projected");
    

11. buttonProjected.setPrefSize(100, 20);
    

12. hbox.getChildren().addAll(buttonCurrent, buttonProjected);
    

14. return hbox;
    

15. }

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

图 1-3 Border Pane 中的 HBox Pane
VBox
VBox 布局窗格和 HBox 很相似，除了这里所有节点是被排列到一个列中的。图 1-4 展示了一个 VBox 窗格的示例。

图 1-4 VBox Pane示例

Padding 可用于设置节点到 VBox 窗格边界的距离。 Spacing可管理节点之间的距离。 Margins 可在单独的控件周围添加额外的空间。

译者注：padding又称内边距、补白或留白，margin又称外边距、边界或额外空白区。它们的概念来源于CSS，即层叠样式表。
从一般意义上讲，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。（参考文章）

例 1-3 创建了一个包含一列选项的 VBox 窗格。

例 1-3 创建一个VBox Pane

1. public VBox addVBox(); {

2. VBox vbox = new VBox();
   

3. vbox.setPadding(new Insets(10));
   

4. vbox.setSpacing(8);
   

6. Text title = new Text("Data");
   

7. title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
   

8. vbox.getChildren().add(title);
   

10. Hyperlink options[] = new Hyperlink[] {
    

11.     new Hyperlink("Sales"),
    

12.     new Hyperlink("Marketing"),
    

13.     new Hyperlink("Distribution"),
    

14.     new Hyperlink("Costs")};
    

16. for (int i=0; i<4; i++) {
    

17.     VBox.setMargin(options[i], new Insets(0, 0, 0, 8));
    

18.     vbox.getChildren().add(options[i]);
    

19. }
    

21. return vbox;
    

22. }

例 1-1 中的 setLeft() 函数将这个 VBox 窗格添加到了border pane的left区域。其结果展示在 图 1-5 中。

图 1-5 Border Pane 中的 VBox Pane

StackPane
StackPane 布局窗格能将所有的节点放到一个堆栈中，其中每一个新的节点被添加到前一个节点的上方。这个布局模型能让你很容易地在一个形状或图像上面覆盖一个文本，或者用常用形状互相覆盖来创建复杂的形状。图 1-6展示了一个通过在一个带有渐变色背景的矩形上堆放一个问号来创建的帮助图标。

图 1-6 Stack Pane 示例

Alignment 属性可以管理stack pane中子节点的对齐方式。这个属性影响所有的子节点，所以margin可以为stack中单独的子节点调整位置。

例 1-4 为帮助图标创建一个stack pane

例 1-4 创建一个 Stack Pane

1. public void addStackPane(HBox hb) {

2. StackPane stack = new StackPane();
   

3. Rectangle helpIcon = new Rectangle(30.0, 25.0);
   

4. helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,
   

5.     new Stop[]{
   

6.     new Stop(0,Color.web("#4977A3")),
   

7.     new Stop(0.5, Color.web("#B0C6DA")),
   

8.     new Stop(1,Color.web("#9CB6CF")),}));
   

9. helpIcon.setStroke(Color.web("#D0E6FA"));
   

10. helpIcon.setArcHeight(3.5);
    

11. helpIcon.setArcWidth(3.5);
    

13. Text helpText = new Text("?");
    

14. helpText.setFont(Font.font("Verdana", FontWeight.BOLD, 18));
    

15. helpText.setFill(Color.WHITE);
    

16. helpText.setStroke(Color.web("#7080A0")); 
    

18. stack.getChildren().addAll(helpIcon, helpText);
    

19. stack.setAlignment(Pos.CENTER_RIGHT);     // 子节点右对齐
    

20. StackPane.setMargin(helpText, new Insets(0, 10, 0, 0)); // 中间的 "?"
    

22. hb.getChildren().add(stack);            // 添加到 例 1-2 中的HBox中
    

23. HBox.setHgrow(stack, Priority.ALWAYS);    // 将所有多余空间都交给stack
    

24. }

例 1-4 中的最后几行代码将stack pane添加到了例 1-2 中创建的 HBox 窗格，并且总是将它放于窗格的最右边。结果展示在 图 1-7 中。

图 1-7 HBox Pane 中的 Stack Pane

GridPane
GridPane布局窗格能让你创建一个灵活的由行和列组成的网格来放置节点。节点可以被放于任何单元格内，也可以根据需要横跨多个单元格。一个grid pane对于创建表单或者任何以行和列组织的布局很有用。图 1-8 展示了一个包含了图标、标题、副标题、正文和图表的grid pane，gridLinesVisible属性可设置是否显示网格线，它能标识出行和列以及行列之间的间隔。这个属性对于可视化调试你的GridPane很有用。

图 1-8 Grid Pane示例

Gap属性可用于管理行和列之间的间隔。Padding属性可用于管理节点与网格边缘的距离。Vertical和horizontal alignment属性可用于管理单元格中单独控件的对齐方式。

例 1-5 创建了图 1-8中的grid pan。

例 1-5 创建一个 Grid Pane

1. public GridPane addGridPane() {

2. GridPane grid = new GridPane();
   

3. grid.setHgap(10);
   

4. grid.setVgap(10);
   

5. grid.setPadding(new Insets(0, 10, 0, 10));
   

7. // Category 位于 column 2, row 1
   

8. Text category = new Text("Sales:");
   

9. category.setFont(Font.font("Arial", FontWeight.BOLD, 20));
   

10. grid.add(category, 1, 0); 
    

12. // Title 位于 column 3, row 1
    

13. Text chartTitle = new Text("Current Year");
    

14. chartTitle.setFont(Font.font("Arial", FontWeight.BOLD, 20));
    

15. grid.add(chartTitle, 2, 0);
    

17. // Subtitle 位于 columns 2-3, row 2
    

18. Text chartSubtitle = new Text("Goods and Services");
    

19. grid.add(chartSubtitle, 1, 1, 2, 1);
    

21. // House icon 位于 column 1, rows 1-2
    

22. ImageView imageHouse = new ImageView(
    

23.   new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));
    

24. grid.add(imageHouse, 0, 0, 1, 2); 
    

26. // Left label 位于 column 1 (bottom), row 3
    

27. Text goodsPercent = new Text("Goods\n80%");
    

28. GridPane.setValignment(goodsPercent, VPos.BOTTOM);
    

29. grid.add(goodsPercent, 0, 2); 
    

31. // Chart 位于 columns 2-3, row 3
    

32. ImageView imageChart = new ImageView(
    

33.  new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));
    

34. grid.add(imageChart, 1, 2, 2, 1); 
    

36. // Right label 位于 column 4 (top), row 3
    

37. Text servicesPercent = new Text("Services\n20%");
    

38. GridPane.setValignment(servicesPercent, VPos.TOP);
    

39. grid.add(servicesPercent, 3, 2);
    

41. return grid;
    

42. }

例 1-1 中的 setCenter() 函数将这个grid pane添加到了border pane的center区域。 结果展示在 图 1-9 中。

图 1-9 Border Pane中的Grid Pane

当窗口缩放时，grid pane中的节点会根据它们的布局约束进行缩放。

FlowPane
FlowPane 中的节点会连续地排列，并且会在窗格的边界自动换行（或列）。节点可以垂直地（按列）或水平地（按行）流动。一个垂直flow pane会在窗格的高度边界上包装节点，一个水平flow pane会在窗格的水平边界上包装节点。图 1-10 展示了一个水平flow pane的例子，里面有多个带有数字的图标。作为对比，如果把它换成垂直flow pane，第一列会包含1-4号图标，第二列中则包含5-8号图标。

译者注：包装（wrap），指在窗格的边界上发生自动换行（或换列）。

图 1-10 水平 Flow Pane 示例

Gap属性可以管理行和列之间的间隔大小。Padding属性可以管理节点与窗格边界间的距离。例 1-6 为一系列页面图标创建了一个水平flow pane。

例 1-6 创建一个 Flow Pane

1. public FlowPane addFlowPane() {

2. FlowPane flow = new FlowPane();
   

3. flow.setPadding(new Insets(5, 0, 5, 0));
   

4. flow.setVgap(4);
   

5. flow.setHgap(4);
   

6. flow.setPrefWrapLength(170); // 偏好的宽度保证了只有两列
   

7. flow.setStyle("-fx-background-color: DAE6F3;");
   

9. ImageView pages[] = new ImageView[8];
   

10. for (int i=0; i<8; i++) {
    

11.     pages[i] = new ImageView(
    

12.         new Image(LayoutSample.class.getResourceAsStream(
    

13.         "graphics/chart_"+(i+1)+".png")));
    

14.     flow.getChildren().add(pages[i]);
    

15. }
    

17. return flow;
    

18. }

例 1-1 中的setRight() 函数将这个水平flow pane添加到了border pane的right区域。 其结果展示在 图 1-11 中。

图 1-11 Border Pane 中的 Flow Pane

TilePane
Tile pane 和 flow pane 很相似。TilePane 布局将所有的节点放于一个网格中，并且每个单元格（或tile）保持一致的大小。节点可以水平方式（按行）排列或以竖直方式（按列）排列。水平布局会在tile pane的宽度边界上包装节点，竖直布局会在高度边界上包装节点。使用prefColumns 和 prefRows 属性可设定窗格的偏好大小。

Gap属性可以管理行或列之间的间隔。Padding属性可以管理节点与窗格边界的距离。

例 1-7 创建了一个水平tile pane，形成了与 图 1-10 一样的布局。

例 1-7 创建一个Tile Pane

1. TilePane tile = new TilePane();

2. tile.setPadding(new Insets(5, 0, 5, 0));

3. tile.setVgap(4);

4. tile.setHgap(4);

5. tile.setPrefColumns(2);

6. tile.setStyle("-fx-background-color: DAE6F3;");

8. ImageView pages[] = new ImageView[8];

9. for (int i=0; i<8; i++) {

10.  pages[i] = new ImageView(
    

11.     new Image(LayoutSample.class.getResourceAsStream(
    

12.     "graphics/chart_"+(i+1)+".png")));
    

13.  tile.getChildren().add(pages[i]);
    

14. }

AnchorPane
AnchorPane 布局窗格能让你将节点锚定到窗格的顶部、底部、左侧、右侧或者中间。当窗口缩放时，节点会保持其相对于锚点的位置。节点可被锚定到多个位置，并且同一位置可以锚定多个节点。图 1-12 展示了一个anchor pane，它带有一个GridPane部分用到的grid pane和一个包含两个按钮的HBox，它们分别被锚定到了窗格的顶部和右下角。

图 1-12 Anchor Pane 示例

例 1-8 创建了一个anchor pane，其中有一个节点被锚定到了窗格顶部，另一个节点被锚定到了窗格右下角。这里用了例 1-5 里面创建的grid pane作为top节点。

例 1-8 创建一个 Anchor Pane

1. public AnchorPane addAnchorPane(GridPane grid) {

2. AnchorPane anchorpane = new AnchorPane();
   

3. Button buttonSave = new Button("Save");
   

4. Button buttonCancel = new Button("Cancel");
   

6. HBox hb = new HBox();
   

7. hb.setPadding(new Insets(0, 10, 10, 10));
   

8. hb.setSpacing(10);
   

9. hb.getChildren().addAll(buttonSave, buttonCancel);
   

11. anchorpane.getChildren().addAll(grid,hb);   // 添加 例 1-5中的 grid pane
    

12. AnchorPane.setBottomAnchor(hb, 8.0);
    

13. AnchorPane.setRightAnchor(hb, 5.0);
    

14. AnchorPane.setTopAnchor(grid, 10.0);
    

16. return anchorpane;
    

17. }

下面的语句将border pane的center区域替换成了这个anchor pane。

1. border.setCenter(addAnchorPane(addGridPane()));

其结果展示在 图 1-13 中。

图 1-13 Border Pane 中的 Anchor Pane

当窗口缩放时，节点会根据它们的锚点保持各自的位置。从图 1-14 中可以看出来，当窗口变小时，被锚定到窗格底部的按钮移动到了离sales信息更近的位置。

图 1-14 缩放后的 Anchor Pane

二、控制节点的大小和对齐

使用JavaFx内置布局窗格的一个主要优点是节点的大小和对齐可以交给窗格来完成。当窗格发生了缩放，节点会依据其偏好的尺寸范围进行缩放。注意，不是所有节点都可以缩放。UI控件和布局窗格可以缩放，但是形状、 Text 对象、Group 对象是不可缩放的，它们在布局中被视为刚体。

如果你想要在你的UI中做更多的尺寸控制，你可以直接设置它们的偏好尺寸范围。然后布局窗格会使用你的这些设定决定控件的尺寸。要管理控件的位置，你可以使用布局窗格的对齐属性。

本话题针对节点的尺寸控制和对齐控制提供了简单示例。LayoutSizingAligning.java文件包含了本话题中使用的示例源码，LayoutSizingAligning.zip文件包含了这个示例的NetBeans工程。

控制节点的大小
布局通过调用 prefWidth(height) and prefHeight(width) 函数来获取节点的偏好尺寸。默认情况下，UI控件会基于其中的内容计算出默认的尺寸，并将它作为偏好尺寸。例如，一个 Button 对象计算出来的尺寸是由文本的长度、label中使用的字体，以及可能加入的图像的尺寸共同决定的。通常情况下，计算出来的尺寸应该刚好能让控件和label完全显示出来。

UI控件也提供了默认的最小尺寸和最大尺寸，这是由控件的特定用途决定的。例如，一个Button对象的最大尺寸在默认情况下被设为其偏好尺寸，因为你通常不希望按钮增长到任意大。但是，一个ScrollPane对象的最大尺寸是没有限制的，因为通常你需要它们增长并填补空间。
你可以使用节点默认的尺寸限制，也可以自行设置这些值来达到你想要的效果。例如，图 2-1 展示了一个border pane，里面有多个按钮和一个list view，它们都具有默认的大小。

图 2-1 计算出来的尺寸

假设你想要的外观是图 2-2那样的，其中的UI控件根据你想要的约束调整其大小。

图 2-2 需要的尺寸

应用程序经常需要直接为控件设置最小尺寸、偏好尺寸以及最大尺寸的约束。以下部分给出了有关覆盖计算尺寸、自定义外观的提示。

把按钮设为相同尺寸
你可能遇到过确定每个按钮宽高的问题，并且你可能会将每个按钮的宽高设为这个按钮集合中最大的宽高。实际上更简单的做法是将这些工作交给布局窗格来完成。至于究竟用哪种窗格，这完全是由你想要实现的效果决定的。

使用VBox
图 2-1 中的场景为右边的按钮建立了一个VBox布局窗格，并且使用了按钮的计算尺寸。这些按钮已经有了相同的高度，所以我们只需要调整一下宽度。

图 2-2 中的场景使用了一个 VBox 窗格，VBox窗格在默认情况下会让其宽度和最宽元素的偏好宽度相同，我们充分利用了这个特性。为了让所有的按钮都被缩放到VBox窗格的宽度，每个按钮的最大宽度被设为了Double.MAX_VALUE这个常量，这能让一个控件无限地增长。当然也可以不使用最大值常量，而是将最大宽度设为一个特定值，比如80.0。

例 2-1 展示了如何用一个VBox窗格建立一列具有相同宽度的按钮。

例 2-1 将一列按钮设为相同宽度

1. BorderPane border = new BorderPane();

2. border.setPadding(new Insets(20, 0, 20, 20));

4. Button btnAdd = new Button(“Add”);

5. Button btnDelete = new Button(“Delete”);

6. Button btnMoveUp = new Button(“Move Up”);

7. Button btnMoveDown = new Button(“Move Down”);

9. btnAdd.setMaxWidth(Double.MAX_VALUE);

10. btnDelete.setMaxWidth(Double.MAX_VALUE);

11. btnMoveUp.setMaxWidth(Double.MAX_VALUE);

12. btnMoveDown.setMaxWidth(Double.MAX_VALUE);

14. VBox vbButtons = new VBox();

15. vbButtons.setSpacing(10);

16. vbButtons.setPadding(new Insets(0, 20, 10, 20));

17. vbButtons.getChildren().addAll(btnAdd, btnDelete, btnMoveUp, btnMoveDown);

在本示例程序中，UI中的元素使用了一个border pane来布局。这一列按钮被置于border pane的right区域，从而将按钮的宽度限制在最宽按钮的偏好宽度。border pane的center区域会自动扩展来填充任何可用的空间，所以如果你将这个VBox放在center区域中，VBox窗格和其中的按钮都会自动扩展。

使用TilePane
图 2-1 中的场景使用了一个 HBox 布局窗格来布局底部的按钮，并使用了按钮的计算尺寸。这些按钮有不同的宽高。

图 2-2 中的场景使用了一个水平 TilePane 布局窗格，它在默认情况下会让每个小格(或cell)具有相同的尺寸，我们充分利用了这个特性。每个小格的尺寸刚好能容纳下窗格中最大节点的偏好尺寸。

为了让这些按钮缩放到小格的尺寸，我们只需将它们的最大宽度和最大高度设为Double.MAX_VALUE这个常量。例 2-2展示了如何使用一个tile pane来创建一行具有相同宽高的按钮。

例 2-2 将一行按钮设为相同宽高

1. Button btnApply = new Button(“Apply”);

2. Button btnContinue = new Button(“Continue”);

3. Button btnExit = new Button(“Exit”);

4. btnExit.setStyle("-fx-font-size: 15pt;");

6. btnApply.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

7. btnContinue.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

8. btnExit.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

10. TilePane tileButtons = new TilePane(Orientation.HORIZONTAL);

11. tileButtons.setPadding(new Insets(20, 10, 20, 0));

12. tileButtons.setHgap(10.0);

13. tileButtons.setVGap(8.0);

14. tileButtons.getChildren().addAll(btnApply, btnContinue, btnExit);

Tile pane中的小格不会在窗口缩放时进行缩放，所以如果按钮被置于tile pane中，它们的大小将不会发生变化。注意一点，如果窗口的宽度变窄，tile pane中按钮会发生位置的变化，但不会变小。

将节点保持在偏好大小上
当stage缩放时，stage中的布局窗格可能会将或多或少的空间分配给其中的控件。每个布局窗格有各自分配空间的规则，它会根据其中控件的最小尺寸、偏好尺寸、最大尺寸进行分配。通常情况下，最大尺寸为Double.MAX_VALUE的控件会扩展并填充空余的空间，而最大尺寸有限制的控件则不会扩展。例如，一个ListView 对象的最大尺寸为无限，如果你想要限制它的高度为它的偏好尺寸，你可以将它的最大尺寸设为Control.USE_PREF_SIZE 常数，就像 例 2-3中展示的那样。

例 2-3 将最大高度设为偏好高度

1. ListView lvList = new ListView();

2. ObservableList items = FXCollections.observableArrayList (

3.     "Hot dog", "Hamburger", "French fries", 
   

4.     "Carrot sticks", "Chicken salad");
   

5. lvList.setItems(items);

6. lvList.setMaxHeight(Control.USE_PREF_SIZE);

默认情况下，按钮会增长到它的偏好大小。但是，如果没有覆盖按钮的最小宽度，它会缩小到只显示三个点(…)。为了防止一个按钮的宽度变得比偏好宽度还要小，可以将它的最小宽度设为偏好宽度，就像例 2-4那样。

例 2-4 将最小宽度设为偏好宽度。

1. Button btnMoveDown = new Button(“Move Down”);

2. btnMoveDown.setMinWidth(Control.USE_PREF_SIZE);

一个控件的偏好尺寸一开始是基于计算出来的结果的。你可以覆盖默认设置，并设置偏好尺寸为你想要的尺寸。以下语句覆盖了一个list view的偏好宽度。

1. lvList.setPrefWidth(150.0);

防止缩放
如果你不想让一个控件的大小发生变化，可以将它的最小尺寸、最大尺寸和偏好尺寸都设为一样的大小。如果仅仅要防止宽度（或高度）改变，只需将宽度（或高度）的约束尺寸设为相同值。在例 2-5中，我们创建了一个所有尺寸约束都是相同宽高的list，那么这个list的大小将不会随着窗口的缩放而缩放。我们还创建了一个所有宽度约束都设为相同值的按钮。

例 2-5 设置尺寸约束来防止缩放

1. ListView lvList = new ListView();

2. lvList.setMinSize(150.0, Control.USE_PREF_SIZE);

3. lvList.setMaxSize(150.0, Control.USE_PREF_SIZE);

5. Button btnDelete = new Button(“Delete”);

6. btnDelete.setMinWidth(80.0);

7. btnDelete.setPrefWidth(80.0);

8. btnDelete.setMaxWidth(80.0);

对齐内容
每个布局窗格都有一个默认的对齐其中节点的方式。例如，在 HBox 和 VBox 布局窗格中，节点是顶部对齐和左对齐的。在TilePane 和 FlowPane 中，节点是居中对齐的。窗格本身一般默认是顶部对齐和左对齐的。

你可以通过使用窗格的setAlignment()函数来管理节点和窗格的对齐方式。以下是javafx.geometry 包中的一些enum类，其中包含了很多控制对齐的常量：

· HPos - 包含了确定水平对齐的值。

· Pos - 包含了确定水平及竖直对齐的值。其中下划线左侧的值确定了竖直对齐方式，下划线右侧的值确定了水平对齐方式。例如， Pos.BOTTOM_LEFT 将一个节点在垂直方向上置于底部，水平方向上置于最左边。

· VPos - 包含了确定竖直对齐的值。

图 2-3 是通过 例 2-6 中的代码建立的， 如果不指定任何的对齐约束，布局窗格被置于左上角。

图 2-3 默认的位置

例 2-6 创建一个采用默认对齐方式的UI

1. GridPane grid = new GridPane();
   

2. grid.setHgap(10);
   

3. grid.setVgap(12);
   

5. HBox hbButtons = new HBox();
   

6. hbButtons.setSpacing(10.0);
   

8. Button btnSubmit = new Button("Submit");
   

9. Button btnClear = new Button("Clear");
   

10. Button btnExit = new Button("Exit");
    

11. btnSubmit.setStyle("-fx-font-size: 15pt;");
    

13. Label lblName = new Label("User name:");
    

14. TextField tfName = new TextField();
    

15. Label lblPwd = new Label("Password:");
    

16. PasswordField pfPwd = new PasswordField();
    

18. hbButtons.getChildren().addAll(btnSubmit, btnClear, btnExit);
    

19. grid.add(lblName, 0, 0);
    

20. grid.add(tfName, 1, 0);
    

21. grid.add(lblPwd, 0, 1);
    

22. grid.add(pfPwd, 1, 1);
    

23. grid.add(hbButtons, 0, 2, 2, 1);
    

24. }

假设你想要的外观是像图 2-4那样的，将布局窗格居中对齐，并且改变控件默认的对齐方式。

图 2-4 需要的位置

以下部分提供了一些有关覆盖默认位置的小提示。

将Grid居中
为了居中例 2-6中场景里的grid，可使用如下语句：

1. grid.setAlignment(Pos.CENTER);

对齐列中的控件
在想要实现的布局中，label是右对齐的，field是左对齐的。为了在grid中实现这一点，可使用ColumnConstraints 类来定义每个列并设置水平对齐约束。例 2-7 为 例 2-6 中的grid定义了列。

例 2-7 定义grid中的列

1. GridPane grid = new GridPane();

2. grid.setAlignment(Pos.CENTER);

3. grid.setHgap(10);

4. grid.setVgap(12);

6. ColumnConstraints column1 = new ColumnConstraints();

7. column1.setHalignment(HPos.RIGHT);

8. grid.getColumnConstraints().add(column1);

10. ColumnConstraints column2 = new ColumnConstraints();

11. column2.setHalignment(HPos.LEFT);

12. grid.getColumnConstraints().add(column2);

另一个让一列中的控件右对齐的方式是使用一个 VBox 布局窗格，然后使用setAlignment()函数，就像下面语句中那样：

1. VBox vbox = new VBox;

2. vbox.setAlignment(Pos.CENTER_RIGHT);

居中按钮
按钮被置于一个HBox 窗格中，这个窗格在grid中横跨了两列。下列语句将例 2-6中grid里的按钮居中对齐：

1. hbButtons.setAlignment(Pos.CENTER);

HBox 窗格的setAlignment() 函数会将HBox在其布局空间中居中对齐，并且它也会将其内部的节点居中对齐。你可能更希望不仅这个HBox

在这一行中居中，并且其中的按钮还能在底部对齐，就像图 2-5中那样。

图 2-5 覆盖默认位置并将按钮向底部对齐

为了实现这样的布局，可以将这个HBox置于一个只包含一个小格的内部grid中，并将这个grid置于外层grid的第三行中。然后在内部grid上设置对齐约束来将它居中对齐，并且在HBox中设置一个对齐约束来将其中的内容向底部对齐，就像例 2-8中那样。

例 2-8 将按钮居中并向底部对齐

1. hbButtons.setAlignment(Pos.BOTTOM_CENTER);

2. hbButtons.getChildren().addAll(btnSubmit, btnClear, btnExit);

4. GridPane innergrid = new GridPane();

5. innergrid.setAlignment(Pos.CENTER);

6. innergrid.add(hbButtons, 0, 0);

7. grid.add(innergrid, 0, 2, 2, 1);

二、用CSS设定布局窗格的样式

布局窗格使用了诸如padding, spacing, 和 alignment这些属性来管理窗格的外观元素。层叠样式表（CSS）能让你定义一些属性，并将这些属性应用于多个布局窗格上，这可以为你的JavaFx程序提供一个统一的外观。你也可以使用CSS自定义单独的布局窗格。

本话题使用了 使用内置布局窗格 中的示例，来向您展示使用CSS为不同布局窗格定义样式的例子。图 3-1 展示了我们创建的新样式。

图 3-1 采用自定义样式的布局示例

LayoutSampleCSS.java 包含了建立这个UI的源码。LayoutSampleCSS.zip 包含了这个示例程序的NetBeans工程。

创建样式定义
不像button、check box这些控件，它们都有着各自的样式类 .button 和 .check-box等等，布局窗格没有预定义的样式类。要想为你的布局窗格定义样式，你必须创建一个样式表并定义你想要用的样式类。然后，在你的代码中，当你创建这些窗格时，将合适的样式类应用上去。

例如，你如果想要你所有的HBox窗格拥有相同的背景色，padding和spacing属性，可以创建一个名为 .hbox 的样式类，如 例 3-1。

例 3-1 HBox窗格的示例样式

1. .hbox {

2. -fx-background-color: #2f4f4f;
   

3. -fx-padding: 15;
   

4. -fx-spacing: 10;
   

5. }

你可以通过指定窗格的样式类来让所有的HBox使用这个样式。 例 3-2 中设定了两个窗格的样式类。

例 3-2 设定HBox的样式

1. HBox hbox = new HBox();

2. hbox.getStyleClass().add(“hbox”);

4. HBox hb = new HBox();

5. hb.getStyleClass().add(“hbox”);

布局窗格的样式属性
你可以使用CSS来为所有类型的布局窗格设置背景、边框和padding属性。有些类型的布局窗格可以设置更多的属性。例如，你可以设置 HBox 和 VBox 的spacing和alignment属性，也可以设置TilePane的旋转方向、偏好行数、偏好列数以及其他的属性。另外，你可以在窗格的背景和边框上使用图像。

详情请查看JavaFX CSS 参考指南 ，里面有每种布局窗格的属性列表。 Region 类中的属性可以用于所有布局窗格，因为所有布局窗格都是Region 类的子孙。

设定Scene的样式表
当你准备好了你的样式表，你还必须得将这个样式表添加到你的应用中，然后所有的节点才可以访问这个样式表中的样式。 例 3-3展示了如何将样式表添加到我们的布局示例程序中。在这个例子中，样式表与程序的类文件位于同一个目录中。

例 3-3 添加样式表

1. Scene scene = new Scene(border,585,415);

2. scene.getStylesheets().add(“layoutsamplecss/layoutstyles.css”);

设定布局示例程序的样式
布局示例程序提供了JavaFx layout包中的内置布局窗格的示例。这里我们对这个程序进行样式的设定，从而提供了在不同布局窗格中使用CSS的例子。

样式表 layoutstyles.css 包含了 图 3-1 中用到的样式。

为公用属性设定一个样式
所有的布局窗格都有一系列基本的可用CSS管理的属性。这些属性包括背景、边框、内边距（padding）和窗格形状。如果你有一些窗格需要共享这些公共的属性，你可以定义一个样式类并将它应用到每个窗格上。

在自定义布局的示例程序中，一些布局窗格使用了相同的背景色。例 3-4 中展示的 .pane 样式类被用于设定这个颜色。

例 3-4 .pane 样式类

1. .pane {

2. -fx-background-color: #8fbc8f;
   

3. }

如果一个窗格仅需要设置这个背景色，你只需要给它设置 .pane 样式类。如果需要更多的样式，你可以设置更多的样式到同一个窗格上。 例 3-5 展示了一个设置了 .pane 样式的 anchor pane 和一个设置了 .pane and .grid 样式的 grid pane。

例 3-5 将 .pane 样式设置到一个 Layout Pane上

1. AnchorPane anchorpane = new AnchorPane();

2. anchorpane.getStyleClass().add(“pane”);

4. GridPane grid = new GridPane();

5. grid.getStyleClass().addAll(“pane”,“grid”);

设定Border Pane的样式
Border panes没有为公用属性设定一个样式中提到的基本样式集之外的跟多样式属性。在布局示例程序中，border pane没有设置样式。但是，如果要为一个border pane设置样式，你可以定义一个样式类并将它设置到这个pane上，这和针对其他pane所采用的做法一样。

设定HBox Panes的样式
除了所有布局窗格都有的基本样式属性外， HBox 窗格还有设置对齐、间隔、高度填充的属性。

图 3-1中展示的布局示例程序包含了两个 HBox 窗格。其中第一个 HBox 窗格位于顶部，包含了Current 和 Projected 按钮。第二个 HBox窗格接近底部，包含了Save和Cancel按钮。

对于自定义布局示例，两个 HBox 窗格都有着相同的背景色和间隔。这些属性设定在例 3-1的样式定义中。

其中第二个包含了Save和Cancel按钮的 HBox，还有圆角和较小的padding，如图 3-2所。

图 3-2 设定样式后的 HBox Pane

要在 HBox 窗格上使用我们定义的样式，需要将样式类 .hbox 设定到这些窗格上。要覆盖padding属性并设置额外的属性，比如圆角属性，可以使用例 3-6中定义的样式并为第二个 HBox 窗格设置ID。

例 3-6 自定义的 HBox 样式

1. #hbox-custom {

2. -fx-background-radius: 5.0; 
   

3. -fx-padding: 8;
   

4. }

例 3-7 展示了样式是如何设定到第二个 HBox 窗格上的。

例 3-7 将自定义的HBox样式设置到窗格上

1. HBox hb = new HBox();

2. hb.getStyleClass().add(“hbox”);

3. hb.setId(“hbox-custom”);

设定VBox Pane的样式
除了所有窗格共有的基本属性集外， VBox 窗格还有对齐、间隔、宽度填充的属性。

图 3-1中左侧区域的 VBox 窗格使用了 .pane 样式类中的背景色。边框、padding以及间隔是在例 3-8中的 .vbox 样式类中设置的。

例 3-8 .vbox 样式类

1. .vbox {

2. -fx-border-color: #2e8b57;
   

3. -fx-border-width: 2px;
   

4. -fx-padding: 10;
   

5. -fx-spacing: 8;
   

6. }

例 3-9 展示了如何将这个样式类应用到 VBox 窗格上。

例 3-9 将多个样式类应用到VBox 窗格上

1. VBox vbox = new VBox();

2. vbox.getStyleClass().addAll(“pane”, “vbox”);

设定Stack Pane的样式
除了所有窗格都有的基本属性，stack panes还有对齐属性。在布局示例程序中，stack pane没有设定样式。但是，你可以通过定义样式类并将它设定到窗格上的方法来为它设定样式，和其他窗格的操作方式一样。

设定Grid Pane的样式
除了所有窗格都有的基本属性，grid panes还有设定行列间间隙、网格对齐以及网格线是否可见的属性。

图 3-1 中间区域的grid设置了圆角并具有比网格稍小一点的白色背景。 例 3-10中的 .grid 样式类提供了这样的样式定义，并设置了padding属性和行列间的间隔。

例 3-10 .grid 样式类

1. .grid {

2. -fx-background-color: white;
   

3. -fx-background-radius: 5.0;
   

4. -fx-background-insets: 0.0 5.0 0.0 5.0;
   

5. -fx-padding: 10;
   

6. -fx-hgap: 10;
   

7. -fx-vgap: 10;
   

8. }

例 3-11 展示了这个类是如何应用到这个grid上的。

例 3-11 将这个样式应用到Grid上

1. GridPane grid = new GridPane();

2. grid.getStyleClass().add(“grid”);

请注意，这个grid并没有使用该程序中其他窗格使用的背景色。但是包含这个grid的anchor pane使用了那个背景色。为了阻止grid使用它的父节点的背景色，你必须将grid的背景色设为你想要的颜色。

设定Flow Pane 或 Tile Pane的样式
除了所有布局窗格都有的基本属性集， flow panes 还有对齐、布局方向、行列间间隔的属性，tile pane还有对齐、布局方向、行列间隔、偏好行列数以及偏好宽高。

在布局示例程序中，flow pane或tile pane都可以用于图 3-1的右侧区域。这里样式类中的属性集对于两种窗格都是公用的，所以示例程序中用了同一个样式类。例 3-12中的 .flow-tile 类设置了padding属性和行列间间距的属性。

例 3-12 .flow-tile 样式类

1. .flow-tile {

2. -fx-padding: 10.0 3.0 5.0 0.0;
   

3. -fx-hgap: 4;
   

4. -fx-vgap: 4;
   

5. }

这里的flow pane 和 tile pane也使用了 .pane 样式类中的背景色。 例 3-13 展示了这个样式是如何添加到 flow pane 和 tile pane上的。

例 3-13 设置 Flow Pane and Tile Pane 的样式

1. FlowPane flow = new FlowPane();

2. flow.getStyleClass().addAll(“pane”, “flow-tile”);

4. TilePane tile = new TilePane();

5. tile.getStyleClass().addAll(“pane”, “flow-tile”);

设置Anchor Pane的样式
Anchor panes 除了所有窗格共有的基本属性外，没有别的属性。

图 3-1 中间区域的anchor pane包含了一个grid和一个 HBox 窗格，它们都拥有自己的样式。唯一应用到这个anchor pane上的样式是 例 3-4中的 .pane 样式类中定义的背景色。

例 3-14 展示了这个样式是如何应用到 anchor pane上的。

例 3-14 设置 Anchor Pane 的样式

1. AnchorPane anchorpane = new AnchorPane();

2. anchorpane.getStyleClass().add(“pane”);

使用背景图片
布局窗格可以通过设置 background image 属性来使用图片当做背景。你可以在一个样式类中设定图片、尺寸、位置以及重复类型。图 3-3 展示了另一个版本的布局示例UI，其中左侧的 VBox 窗格以及包含Save和Cancel按钮的 HBox 窗格都是用了背景图。

图 3-3 使用图片设定样式

例 3-15 展示了添加背景图片的样式类定义

例 3-15 使用背景图的样式

1. .vbox {

2. -fx-background-image: url("graphics/arrow_t_up_right.png");
   

3. -fx-background-size: 96, 205;
   

4. -fx-background-repeat: no-repeat;
   

5. -fx-border-color: #2e8b57;
   

6. -fx-border-width: 2px;
   

7. -fx-padding: 10;
   

8. -fx-spacing: 8;
   

9. }

11. #hbox-custom {

12. -fx-background-image: url("graphics/cloud.png");
    

13. -fx-background-size: 60,69;
    

14. -fx-padding: 18 3 18 6;
    

15. -fx-background-radius: 5.0; 
    

16. }

18. #button-custom {

19. -fx-rotate: 45;
    

20. -fx-text-alignment: center;
    

21. }

请注意以下几点：

· 图片位于 /graphics 文件夹，与该程序的class文件位于同一目录下。

· 其中的箭头图片小于我们需要的大小，云朵图片大于我们需要的大小，所以我们通过设定 -fx-background-size 属性来进行缩放。

· 为了防止箭头图片在 VBox 窗格的背景中重复出现， -fx-background-repeat 属性被设为了 no-repeat。

· 为了旋转按钮，我们定义了一个新的样式类 #button-custom ，并且 Save 和 Cancel 按钮的 ID 被设为了 button-custom

转载自：https://blog.csdn.net/daixinmei/article/details/44938541