在JavaFX中使用布局资料.docx

1、在JavaFX中使用布局资料在JavaFX中使用布局一、用内置布局窗格一个JavaFx应用可以通过设置每个UI元素的位置和大小来手动地布局用户界面。但是，一个更简单的做法是使用布局窗格。JavaFxSDK提供了多种布局容器类，叫做窗格，它们可简化对一些经典布局的设置和管理，例如行、列、堆叠、平铺等等。当窗口缩放时，布局窗格会自动地根据节点属性重设其包含的所有节点的位置和大小。本话题为JavaFxlayout包中提供的的每个布局窗格都给出了相应的概述和简单的示例。LayoutSample.java文件包含了本话题中UI的源码。LayoutSample.zip文件包含了示例应用的NetBeans工

2、程。BorderPaneBorderPane布局窗格提供了5个放置节点的区域：top,bottom,left,right,和center。图1-1展示了borderpane构建的布局样式。这些区域可以是任意大小，如果应用不需要某个区域，你可以不定义它，然后窗格就不会给这个区域分配空间。图1-1BorderPane示例borderpane可用于这种经典的外观：top:工具栏，bottom:状态栏，left:导航栏，right:附加信息，center:工作区。默认情况下，如果窗口比所有区域所需空间还大，多余的空间将被分配给中间区域。如果窗口比所需空间小，区域可能会重叠。重叠是由区域设置的顺序决定的

3、。例如，如果区域设置的顺序是left,bottom,right，当窗口变得更小时，bottom区域会覆盖left区域，right区域会覆盖bottom区域。如果区域设置的顺序是left,right,bottom，当窗口变得更小时，bottom区域会覆盖left和right区域。例1-1展示了布局示例应用中创建borderpane的代码。创建每个区域用到的布局窗格的函数会在本话题的剩余部分介绍。例1-1创建一个BorderPane1.BorderPaneborder=newBorderPane();2.HBoxhbox=addHBox()3.border.setTop(hbox);4.borde

4、r.setLeft(addVBox();5.addStackPane(hbox);/在top区域的HBox中添加stackpane6.7.border.setCenter(addGridPane();8.border.setRight(addFlowPane();注意一点，在本例中，borderpane的bottom区域并没有被使用。如果你想要在bottom区域中添加什么，可以使用下面的语句并且替换其中的节点node为你选择的控件。1.border.setBottom(node);HBoxHBox布局窗格可以让你很容易地将一系列节点排列到一行中。图1-2展示了一个HBox窗格的例子.图1-2H

5、Box窗格示例Padding属性可以设置节点到HBox边缘的距离。Spacing可以管理节点之间的距离。Style可用来改变背景色。例1-2为一个工具栏创建了一个包含两个按钮的HBox窗格。例1-2创建一个HBox窗格1.publicHBoxaddHBox()2.HBoxhbox=newHBox();3.hbox.setPadding(newInsets(15,12,15,12);4.hbox.setSpacing(10);5.hbox.setStyle(-fx-background-color:#336699;);6.7.ButtonbuttonCurrent=newButton(Curre

6、nt);8.buttonCurrent.setPrefSize(100,20);9.10.ButtonbuttonProjected=newButton(Projected);11.buttonProjected.setPrefSize(100,20);12.hbox.getChildren().addAll(buttonCurrent,buttonProjected);13.14.returnhbox;15.例1-1中的setTop()函数将这个HBox窗格添加到borderpane的top区域。其结果展示在图1-3中。图1-3BorderPane中的HBoxPaneVBoxVBox布局窗格

7、和HBox很相似，除了这里所有节点是被排列到一个列中的。图1-4展示了一个VBox窗格的示例。图1-4VBoxPane示例Padding可用于设置节点到VBox窗格边界的距离。Spacing可管理节点之间的距离。Margins可在单独的控件周围添加额外的空间。译者注：padding又称内边距、补白或留白，margin又称外边距、边界或额外空白区。它们的概念来源于CSS，即层叠样式表。从一般意义上讲，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元

8、素之间有一段“呼吸距离”。（参考文章）例1-3创建了一个包含一列选项的VBox窗格。例1-3创建一个VBoxPane1.publicVBoxaddVBox();2.VBoxvbox=newVBox();3.vbox.setPadding(newInsets(10);4.vbox.setSpacing(8);5.6.Texttitle=newText(Data);7.title.setFont(Font.font(Arial,FontWeight.BOLD,14);8.vbox.getChildren().add(title);9.10.Hyperlinkoptions=newHyperlink

9、11.newHyperlink(Sales),12.newHyperlink(Marketing),13.newHyperlink(Distribution),14.newHyperlink(Costs);15.16.for(inti=0;i4;i+)17.VBox.setMargin(optionsi,newInsets(0,0,0,8);18.vbox.getChildren().add(optionsi);19.20.21.returnvbox;22.例1-1中的setLeft()函数将这个VBox窗格添加到了borderpane的left区域。其结果展示在图1-5中。图1-5Borde

10、rPane中的VBoxPaneStackPaneStackPane布局窗格能将所有的节点放到一个堆栈中，其中每一个新的节点被添加到前一个节点的上方。这个布局模型能让你很容易地在一个形状或图像上面覆盖一个文本，或者用常用形状互相覆盖来创建复杂的形状。图1-6展示了一个通过在一个带有渐变色背景的矩形上堆放一个问号来创建的帮助图标。图1-6StackPane示例Alignment属性可以管理stackpane中子节点的对齐方式。这个属性影响所有的子节点，所以margin可以为stack中单独的子节点调整位置。例1-4为帮助图标创建一个stackpane例1-4创建一个StackPane1.publi

11、cvoidaddStackPane(HBoxhb)2.StackPanestack=newStackPane();3.RectanglehelpIcon=newRectangle(30.0,25.0);4.helpIcon.setFill(newLinearGradient(0,0,0,1,true,CycleMethod.NO_CYCLE,5.newStop6.newStop(0,Color.web(#4977A3),7.newStop(0.5,Color.web(#B0C6DA),8.newStop(1,Color.web(#9CB6CF),);9.helpIcon.setStroke(C

12、olor.web(#D0E6FA);10.helpIcon.setArcHeight(3.5);11.helpIcon.setArcWidth(3.5);12.13.TexthelpText=newText(?);14.helpText.setFont(Font.font(Verdana,FontWeight.BOLD,18);15.helpText.setFill(Color.WHITE);16.helpText.setStroke(Color.web(#7080A0);17.18.stack.getChildren().addAll(helpIcon,helpText);19.stack.

13、setAlignment(Pos.CENTER_RIGHT);/子节点右对齐20.StackPane.setMargin(helpText,newInsets(0,10,0,0);/中间的?21.22.hb.getChildren().add(stack);/添加到例1-2中的HBox中23.HBox.setHgrow(stack,Priority.ALWAYS);/将所有多余空间都交给stack24.例1-4中的最后几行代码将stackpane添加到了例1-2中创建的HBox窗格，并且总是将它放于窗格的最右边。结果展示在图1-7中。图1-7HBoxPane中的StackPaneGridPan

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

15、管理单元格中单独控件的对齐方式。例1-5创建了图1-8中的gridpan。例1-5创建一个GridPane1.publicGridPaneaddGridPane()2.GridPanegrid=newGridPane();3.grid.setHgap(10);4.grid.setVgap(10);5.grid.setPadding(newInsets(0,10,0,10);6.7./Category位于column2,row18.Textcategory=newText(Sales:);9.category.setFont(Font.font(Arial,FontWeight.BOLD,20)

16、;10.grid.add(category,1,0);11.12./Title位于column3,row113.TextchartTitle=newText(CurrentYear);14.chartTitle.setFont(Font.font(Arial,FontWeight.BOLD,20);15.grid.add(chartTitle,2,0);16.17./Subtitle位于columns2-3,row218.TextchartSubtitle=newText(GoodsandServices);19.grid.add(chartSubtitle,1,1,2,1);20.21./H

17、ouseicon位于column1,rows1-222.ImageViewimageHouse=newImageView(23.newImage(LayoutSample.class.getResourceAsStream(graphics/house.png);24.grid.add(imageHouse,0,0,1,2);25.26./Leftlabel位于column1(bottom),row327.TextgoodsPercent=newText(Goodsn80%);28.GridPane.setValignment(goodsPercent,VPos.BOTTOM);29.grid

18、.add(goodsPercent,0,2);30.31./Chart位于columns2-3,row332.ImageViewimageChart=newImageView(33.newImage(LayoutSample.class.getResourceAsStream(graphics/piechart.png);34.grid.add(imageChart,1,2,2,1);35.36./Rightlabel位于column4(top),row337.TextservicesPercent=newText(Servicesn20%);38.GridPane.setValignment

19、(servicesPercent,VPos.TOP);39.grid.add(servicesPercent,3,2);40.41.returngrid;42.例1-1中的setCenter()函数将这个gridpane添加到了borderpane的center区域。结果展示在图1-9中。图1-9BorderPane中的GridPane当窗口缩放时，gridpane中的节点会根据它们的布局约束进行缩放。FlowPaneFlowPane中的节点会连续地排列，并且会在窗格的边界自动换行（或列）。节点可以垂直地（按列）或水平地（按行）流动。一个垂直flowpane会在窗格的高度边界上包装节点，一个水

20、平flowpane会在窗格的水平边界上包装节点。图1-10展示了一个水平flowpane的例子，里面有多个带有数字的图标。作为对比，如果把它换成垂直flowpane，第一列会包含1-4号图标，第二列中则包含5-8号图标。译者注：包装（wrap），指在窗格的边界上发生自动换行（或换列）。图1-10水平FlowPane示例Gap属性可以管理行和列之间的间隔大小。Padding属性可以管理节点与窗格边界间的距离。例1-6为一系列页面图标创建了一个水平flowpane。例1-6创建一个FlowPane1.publicFlowPaneaddFlowPane()2.FlowPaneflow=newFlow

21、Pane();3.flow.setPadding(newInsets(5,0,5,0);4.flow.setVgap(4);5.flow.setHgap(4);6.flow.setPrefWrapLength(170);/偏好的宽度保证了只有两列7.flow.setStyle(-fx-background-color:DAE6F3;);8.9.ImageViewpages=newImageView8;10.for(inti=0;i8;i+)11.pagesi=newImageView(12.newImage(LayoutSample.class.getResourceAsStream(13.g

22、raphics/chart_+(i+1)+.png);14.flow.getChildren().add(pagesi);15.16.17.returnflow;18.例1-1中的setRight()函数将这个水平flowpane添加到了borderpane的right区域。其结果展示在图1-11中。图1-11BorderPane中的FlowPaneTilePaneTilepane和flowpane很相似。TilePane布局将所有的节点放于一个网格中，并且每个单元格（或tile）保持一致的大小。节点可以水平方式（按行）排列或以竖直方式（按列）排列。水平布局会在tilepane的宽度边界上包装

23、节点，竖直布局会在高度边界上包装节点。使用prefColumns和prefRows属性可设定窗格的偏好大小。Gap属性可以管理行或列之间的间隔。Padding属性可以管理节点与窗格边界的距离。例1-7创建了一个水平tilepane，形成了与图1-10一样的布局。例1-7创建一个TilePane1.TilePanetile=newTilePane();2.tile.setPadding(newInsets(5,0,5,0);3.tile.setVgap(4);4.tile.setHgap(4);5.tile.setPrefColumns(2);6.tile.setStyle(-fx-backgr

24、ound-color:DAE6F3;);7.8.ImageViewpages=newImageView8;9.for(inti=0;i8;i+)10.pagesi=newImageView(11.newImage(LayoutSample.class.getResourceAsStream(12.graphics/chart_+(i+1)+.png);13.tile.getChildren().add(pagesi);14.AnchorPaneAnchorPane布局窗格能让你将节点锚定到窗格的顶部、底部、左侧、右侧或者中间。当窗口缩放时，节点会保持其相对于锚点的位置。节点可被锚定到多个位置，

25、并且同一位置可以锚定多个节点。图1-12展示了一个anchorpane，它带有一个GridPane部分用到的gridpane和一个包含两个按钮的HBox，它们分别被锚定到了窗格的顶部和右下角。图1-12AnchorPane示例例1-8创建了一个anchorpane，其中有一个节点被锚定到了窗格顶部，另一个节点被锚定到了窗格右下角。这里用了例1-5里面创建的gridpane作为top节点。例1-8创建一个AnchorPane1.publicAnchorPaneaddAnchorPane(GridPanegrid)2.AnchorPaneanchorpane=newAnchorPane();3.B

26、uttonbuttonSave=newButton(Save);4.ButtonbuttonCancel=newButton(Cancel);5.6.HBoxhb=newHBox();7.hb.setPadding(newInsets(0,10,10,10);8.hb.setSpacing(10);9.hb.getChildren().addAll(buttonSave,buttonCancel);10.11.anchorpane.getChildren().addAll(grid,hb);/添加例1-5中的gridpane12.AnchorPane.setBottomAnchor(hb,8.0);13.AnchorPane.setRightAnchor(hb,5.0);14.AnchorPane.setTopAnchor(grid,10.0);15.16.returnanchorpane;17.下面的语句将borderpane的center区域替换成了这个anchorpane。1.border.setCenter(addAnchorPane(addGridPane();其结果展示在图1-13中。图1-13BorderPane中的AnchorPane当窗口缩放时，节点会根据它们的锚点保持各自的位置。从图1-14中可以