DOC-05-01 使用内置的布局面板

本系列教程主要介绍JavaFX SDK中布局容器相关类，我们称之为面板(Pane)。使用布局面板来简化JavaFX应用程序中的用户界面的管理。

我们可以通过为每个界面元素设置位置和大小属性来进行手动布局。然而，更简单的选择是使用布局面板。JavaFX SDK中提供了一系列的布局面板来简化设置和管理一些经典布局，比如行(Row)、列(Column)、堆栈(Stack)、磁贴(Tile)等等。当窗口被改变大小时，布局面板可以根据其包含的各个界面元素的属性来自动重设位置和大小。

本系列教程为JavaFX布局包中的每个布局面板提供了概述和简单样例。LayoutSample.java文件包含了本文中的示例代码。LayoutSample.zip包含了样例程序的Netbeans IDE工程文件。

边框面板(BorderPane)

BorderPane布局面包被划分为5个区域来放置界面元素：上、下、左、右、中。图1-1显示了BorderPane的布局示意图。每个区域的大小是没有限制的。在你使用BorderPane时，如果不需要某个区域，你只要不为该区域设置内容，该区域则不会被分配显示空间，自然也就不会显示。

图1-1 BorderPane布局示意图

BorderPane常用于定义一个非常经典的布局效果：上方是菜单栏和工具栏，下方是状态栏，左边是导航面板，右边是附加信息面板，中间是核心工作区域。

当BorderPane所在窗口的大小比各区域内容所需空间大时，多出的空间默认会设置给中间区域。当窗口大小比各区域所需空间小时，各个区域就会重叠。重叠的顺序取决于各个区域设置的顺序。例如，如果各个区域设置的顺序是左、下、右，则当窗口变小时，下方区域会覆盖左边区域，而右边区域会覆盖下方区域。如果区域设置顺序是左、右、下，当窗口变小时，下方区域则会在覆盖到左边和右边区域之上。

例1-1展示了在”Layout Sample”示例项目中创建BorderPane的代码，其中为各个区域的设置内容的方法会在本文的后续章节中进行说明。

例1-1创建BorderPane

Java

BorderPane border = new BorderPane();

HBox hbox = addHBox()

border.setTop(hbox);

border.setLeft(addVBox());

addStackPane(hbox); //添加一个堆栈面板到上方区域的HBox中

border.setCenter(addGridPane());

border.setRight(addFlowPane());

1

2

3

4

5

6

7

8

BorderPaneborder=newBorderPane();

HBoxhbox=addHBox()

border.setTop(hbox);

border.setLeft(addVBox());

addStackPane(hbox);//添加一个堆栈面板到上方区域的HBox中

border.setCenter(addGridPane());

border.setRight(addFlowPane());

注意，这个示例中没有使用BorderPane的下方区域。如果你想在下方区域中添加一些内容，请使用下面的代码，并使用你选择的控件替换其node参数：

Java

border.setBottom(node);

1

border.setBottom(node);

水平盒子(HBox)

HBox布局面板为将多个节点排列在一行中提供了一个简单的方法。图1-2是HBox的一个示例。

图1-2 HBox示例

设置内边距(Padding)属性可以用于管理节点到HBox边缘的距离。设置间距(Spacing)属性可以用于管理节点之间的距离。设置样式(Style)属性可以改变背景颜色。

例1-2创建了一个HBox来实现了一个带有两个按钮的工具栏(ToolBar)。

例1-2创建一个HBox面板

Java

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

publicHBoxaddHBox(){

HBoxhbox=newHBox();

hbox.setPadding(newInsets(15,12,15,12));//节点到边缘的距离

hbox.setSpacing(10);//节点之间的间距

hbox.setStyle(“-fx-background-color:#336699;”);//背景色

ButtonbuttonCurrent=newButton(“Current”);

buttonCurrent.setPrefSize(100,20);

ButtonbuttonProjected=newButton(“Projected”);

buttonProjected.setPrefSize(100,20);

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

returnhbox;

}

例1-1中的setTop()方法将HBox添加到了BorderPane的上方区域中。结果如图1-3所示。

图1-3在BorderPane中的HBox

垂直盒子(VBox)

VBox布局面板和HBox很类似，只是其包含的节点是排成一列。图1-4显示了一个VBox的示例。

图1-4 VBox示例

设置内边距(Padding)属性可以管理节点到VBox边缘的距离。设置间距(Spacing)属性可以管理节点之间的距离。设置外边距(Margin)属性可以为单个控件周围增加额外的空间。

例1-3创建了一个VBox，其中包含了一系列的选项。

例1-3创建一个VBox

Java

public VBox addVBox(); {

VBox vbox = new VBox();

vbox.setPadding(new Insets(10)); //内边距

vbox.setSpacing(8); //节点间距

Text title = new Text("Data");

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

vbox.getChildren().add(title);

Hyperlink options[] = new Hyperlink[] {

new Hyperlink("Sales"),

new Hyperlink("Marketing"),

new Hyperlink("Distribution"),

new Hyperlink("Costs")};

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

VBox.setMargin(options[i], new Insets(0, 0, 0, 8)); //为每个节点设置外边距

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

}

return vbox;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

publicVBoxaddVBox();{

VBoxvbox=newVBox();

vbox.setPadding(newInsets(10));//内边距

vbox.setSpacing(8);//节点间距

Texttitle=newText("Data");

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

vbox.getChildren().add(title);

Hyperlinkoptions[]=newHyperlink[]{

newHyperlink("Sales"),

newHyperlink("Marketing"),

newHyperlink("Distribution"),

newHyperlink("Costs")};

for(inti=0;i<4;i++){

VBox.setMargin(options[i],newInsets(0,0,0,8));//为每个节点设置外边距

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

}

returnvbox;

}

例1-1中的setLeft()方法将VBox添加到了BorderPane的左边区域中。程序运行结果如图1-5所示。

图1-5在BorderPane中的VBox

堆栈面板(StackPane)

StackPane布局面板将所有的节点放在一个堆栈中进行布局管理，后添加进去的节点会显示在前一个添加进去的节点之上。这个布局为将文本(Text)覆盖到一个图形(Shape)或者图像(Image)之上，或者将普通图形相互覆盖来创建更复杂的图形，提供了一个简单的方案。图1-6显示了一个帮助按钮，它是通过在一个具有渐变背景的矩形上堆叠一个问号标志来实现的。

图1-6简单的StackPane示例

你可以通过设置对齐属性(Alignment)来控制子节点在StackPane中的位置。这个属性会影响所有的子节点，而设置外边距属性(Margin)可以控制在StackPane中的单个子节点位置。

例1-4中创建了用于实现帮助按钮的StackPane。

例1-4创建一个StackPane

Java

public void addStackPane(HBox hb){

StackPane stack = new StackPane();

Rectangle helpIcon = new Rectangle(30.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(“Verdana”, FontWeight.BOLD, 18));

helpText.setFill(Color.WHITE);

helpText.setStroke(Color.web(“#7080A0”));

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

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

StackPane.setMargin(helpText, new Insets(0, 10, 0, 0)); //设置问号居中显示

hb.getChildren().add(stack); // 将StackPane添加到HBox中

HBox.setHgrow(stack, Priority.ALWAYS); // 将HBox水平多余的所有空间都给StackPane，这样前面设置的右对齐就能保证问号按钮在最右边

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

publicvoidaddStackPane(HBoxhb){

StackPanestack=newStackPane();

RectanglehelpIcon=newRectangle(30.0,25.0);

helpIcon.setFill(newLinearGradient(0,0,0,1,true,CycleMethod.NO_CYCLE,

newStop[]{

newStop(0,Color.web(“#4977A3”)),

newStop(0.5,Color.web(“#B0C6DA”)),

newStop(1,Color.web(“#9CB6CF”)),}));

helpIcon.setStroke(Color.web(“#D0E6FA”));

helpIcon.setArcHeight(3.5);

helpIcon.setArcWidth(3.5);

TexthelpText=newText(“?”);

helpText.setFont(Font.font(“Verdana”,FontWeight.BOLD,18));

helpText.setFill(Color.WHITE);

helpText.setStroke(Color.web(“#7080A0”));

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

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

StackPane.setMargin(helpText,newInsets(0,10,0,0));//设置问号居中显示

hb.getChildren().add(stack);// 将StackPane添加到HBox中

HBox.setHgrow(stack,Priority.ALWAYS);// 将HBox水平多余的所有空间都给StackPane，这样前面设置的右对齐就能保证问号按钮在最右边

}

例1-4中的最后几行代码将创建的StackPane添加到例1-2创建的HBox中，同时设置StackPane始终居于HBox的最右边。代码运行结果如图1-7 所示。

图1-7在HBox中的StackPane

网格面板(GridPane)

GridPane布局面板使你可以创建灵活的基于行和列的网格来放置节点。节点可以被放置到任意一个单元格中，也可以根据需要设置一个节点跨越多个单元格(行或者列)。GridPane对于创建表单或者其他以行和列来组织的界面来说是非常有用的。图1-8显示了一个网格面板，它包含了一个图标、标题、子标题、文本和一个饼状图。在图中，属性gridLinesVisible被用来设置显示网格线，它能展示出行、列以及行列之间的间隙。这个属性在进行GridPane的可视化调试时非常有用。

图1-8简单的GridPane示例

设置间隙属性(Gap)用来管理行和列之间的距离。设置内边距属性(Padding)用来管理节点元素和GridPane边缘之间的距离。设置垂直(Vertical)和水平(Horizontal)对齐属性(Alignment)能够控制单元格中的各个控件的对齐方式。

例1-5创建了如图1-8中所示的GridPane。

例1-5创建GridPane

Java

public GridPane addGridPane(){

GridPane grid = new GridPane();

grid.setHgap(10);

grid.setVgap(10);

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

// 将category节点放在第1行,第2列

Text category = new Text(“Sales:”);

category.setFont(Font.font(“Arial”, FontWeight.BOLD, 20));

grid.add(category, 1, 0);

// 将chartTitle节点放在第1行,第3列

Text chartTitle = new Text(“Current Year”);

chartTitle.setFont(Font.font(“Arial”, FontWeight.BOLD, 20));

grid.add(chartTitle, 2, 0);

// 将chartSubtitle节点放在第2行,占第2和第3列

Text chartSubtitle = new Text(“Goods and Services”);

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

// 将House图标放在第1列，占第1和第2行

ImageView imageHouse = new ImageView(

new Image(LayoutSample.class.getResourceAsStream(“graphics/house.png”)));

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

// 将左边的标签goodsPercent放在第3行，第1列，靠下对齐

Text goodsPercent = new Text(“Goods\n80%”);

GridPane.setValignment(goodsPercent, VPos.BOTTOM);

grid.add(goodsPercent, 0, 2);

// 将饼图放在第3行，占第2和第3列

ImageView imageChart = new ImageView(

new Image(LayoutSample.class.getResourceAsStream(“graphics/piechart.png”)));

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

// 将右边的标签servicesPercent放在第3行，第4列，靠上对齐

Text servicesPercent = new Text(“Services\n20%”);

GridPane.setValignment(servicesPercent, VPos.TOP);

grid.add(servicesPercent, 3, 2);

return grid;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

publicGridPaneaddGridPane(){

GridPanegrid=newGridPane();

grid.setHgap(10);

grid.setVgap(10);

grid.setPadding(newInsets(0,10,0,10));

// 将category节点放在第1行,第2列

Textcategory=newText(“Sales:”);

category.setFont(Font.font(“Arial”,FontWeight.BOLD,20));

grid.add(category,1,0);

// 将chartTitle节点放在第1行,第3列

TextchartTitle=newText(“CurrentYear”);

chartTitle.setFont(Font.font(“Arial”,FontWeight.BOLD,20));

grid.add(chartTitle,2,0);

// 将chartSubtitle节点放在第2行,占第2和第3列

TextchartSubtitle=newText(“GoodsandServices”);

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

// 将House图标放在第1列，占第1和第2行

ImageViewimageHouse=newImageView(

newImage(LayoutSample.class.getResourceAsStream(“graphics/house.png”)));

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

// 将左边的标签goodsPercent放在第3行，第1列，靠下对齐

TextgoodsPercent=newText(“Goods\n80%”);

GridPane.setValignment(goodsPercent,VPos.BOTTOM);

grid.add(goodsPercent,0,2);

// 将饼图放在第3行，占第2和第3列

ImageViewimageChart=newImageView(

newImage(LayoutSample.class.getResourceAsStream(“graphics/piechart.png”)));

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

// 将右边的标签servicesPercent放在第3行，第4列，靠上对齐

TextservicesPercent=newText(“Services\n20%”);

GridPane.setValignment(servicesPercent,VPos.TOP);

grid.add(servicesPercent,3,2);

returngrid;

}

例1-1的setCenter()方法将上面创建的GridPane添加到了BorderPane的中间区域中。代码运行结果如图1-9所示。

图1-9在BorderPane中的GridPane

当窗口大小变化时，网格面板中的节点将会根据其自身的布局设置自动适应大小变化。

流面板(FlowPane)

FlowPane布局面板中包含的节点会连续地平铺放置，并且会在边界处自动换行(或者列)。这些节点可以在垂直方向(按列)或水平方向(按行)上平铺。垂直的FlowPane会在高度边界处自动换列，水平的FlowPane会在宽度边界处自动换行。图1-10显示了一个使用了数字编号图标的水平FlowPane样例。相比之下如果在垂直FlowPane中，第一列会包含标号为1到4的节点，而第二列会包含编号为5到8的节点。

图1-10水平FlowPane样例

设置间隙属性(Gap)用于管理行和列之间的距离。设置内边距属性(Padding)用于管理节点元素和FlowPane边缘之间的距离。例1-6创建了如图1-10所示的带有一系列的页面图标的水平FlowPane。

例1-6创建FlowPane

Java

public FlowPane addFlowPane(){

FlowPane flow = new FlowPane();

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

flow.setVgap(4);

flow.setHgap(4);

flow.setPrefWrapLength(170); // 预设FlowPane的宽度，使其能够显示两列

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+1)+”.png”)));

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

}

return flow;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

publicFlowPaneaddFlowPane(){

FlowPaneflow=newFlowPane();

flow.setPadding(newInsets(5,0,5,0));

flow.setVgap(4);

flow.setHgap(4);

flow.setPrefWrapLength(170);// 预设FlowPane的宽度，使其能够显示两列

flow.setStyle(“-fx-background-color:DAE6F3;”);

ImageViewpages[]=newImageView[8];

for(inti=0;i<8;i++){

pages[i]=newImageView(

newImage(LayoutSample.class.getResourceAsStream(

“graphics/chart_”+(i+1)+”.png”)));

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

}

returnflow;

}

例1-1中的setRight()方法将FlowPane添加到了BorderPane的右边区域之中。代码运行结果如图1-11所示。

图1-11在BorderPane中的FlowPane

磁贴面板(TilePane)

TilePane布局面板和FlowPane很相似。TilePane将其包含的节点都放在一个网格中，其中每格或者每块磁贴的大小都是一样的。节点可以按水平方向(行)进行排列，或者以垂直方向(列)进行排列。水平排列时会在TilePane的宽度边界处对Tile进行自动换行，垂直排列时会在TilePane的高度边界处对Tile进行自动换列。使用prefColumns和prefRows属性可以设定TilePane的首选大小。

设置间隙属性(Gap)用来管理行和列之间间距。设置内边距属性(Padding)用来设管理节点元素和TilePane边缘之间的距离。

例1-7创建了一个水平排列的TilePane，它产生了如图1-10所示的布局。

例1-7创建一个TilePane

Java

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+1)+”.png”)));

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

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

TilePanetile=newTilePane();

tile.setPadding(newInsets(5,0,5,0));

tile.setVgap(4);

tile.setHgap(4);

tile.setPrefColumns(2);

tile.setStyle(“-fx-background-color:DAE6F3;”);

ImageViewpages[]=newImageView[8];

for(inti=0;i<8;i++){

pages[i]=newImageView(

newImage(LayoutSample.class.getResourceAsStream(

“graphics/chart_”+(i+1)+”.png”)));

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

}

锚面板(AnchorPane)

AnchorPane布局面板可以让你将节点锚定到面板的顶部、底部、左边、右边或者中间位置。当窗体的大小变化时，节点会保持与其锚点之间的相对位置。一个节点可以锚定到一个或者多个位置，并且多个节点可以被锚定到同一个位置。图1-12显示了一个带有GridPane的AnchorPane，这个GridPane是在前面的”网格面板(GridPane)”章节中创建的，它被锚定到了顶部，同时将一个包含两个按钮的HBox锚定到了右下方。

图1-12 AnchorPane样例

例1-8创建了一个AnchorPane，它带有一个被锚定到顶部的节点和一个被锚定到右下角的面板。在前面的例1-5 所创建的GridPane被用到了顶部节点中。

例1-8创建一个AnchorPane

Java

public AnchorPane addAnchorPane(GridPane grid){

AnchorPane anchorpane = new AnchorPane();

Button buttonSave = new Button(“Save”);

Button buttonCancel = new Button(“Cancel”);

HBox hb = new HBox();

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

hb.setSpacing(10);

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

anchorpane.getChildren().addAll(grid,hb); //添加来自例1-5 的GridPane

AnchorPane.setBottomAnchor(hb, 8.0);

AnchorPane.setRightAnchor(hb, 5.0);

AnchorPane.setTopAnchor(grid, 10.0);

return anchorpane;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

publicAnchorPaneaddAnchorPane(GridPanegrid){

AnchorPaneanchorpane=newAnchorPane();

ButtonbuttonSave=newButton(“Save”);

ButtonbuttonCancel=newButton(“Cancel”);

HBoxhb=newHBox();

hb.setPadding(newInsets(0,10,10,10));

hb.setSpacing(10);

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

anchorpane.getChildren().addAll(grid,hb);//添加来自例1-5 的GridPane

AnchorPane.setBottomAnchor(hb,8.0);

AnchorPane.setRightAnchor(hb,5.0);

AnchorPane.setTopAnchor(grid,10.0);

returnanchorpane;

}

下面的代码语句将BorderPane的中间区域替换为上面创建的AnchorPane。

Java

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

1

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

运行结果如图1-13所示。

图1-13在BorderPane中的AnchorPane

当窗体大小变化时，其中的节点会根据其锚点来保持它们在面板中的相对位置。图1-14展示了当窗体变小时的效果，此时锚定在面板右下方的两个按钮会移到更靠近Sales信息的位置。

图1-14改变了大小的AnchorPane

附加资源

要学习更多关于JavaFX布局面板的信息，请查看JavaFX API文档中的javafx.scene.layout包相关的信息。

应用程序文件

源代码

NetBeans工程

打赏一下

支付宝

微信