《在JavaFX中使用布置组织》由会员分享，可在线阅读，更多相关《在JavaFX中使用布置组织（29页珍藏版）》请在金锄头文库上搜索。
1、+在JavaFX中使用布局一、用内置布局窗格一个JavaFx应用可以通过设置每个UI元素的位置和大小来手动地布局用户界面。但是，一个更简单的做法是使用布局窗格。JavaFx SDK提供了多种布局容器类，叫做窗格，它们可简化对一些经典布局的设置和管理，例如行、列、堆叠、平铺等等。当窗口缩放时，布局窗格会自动地根据节点属性重设其包含的所有节点的位置和大小。本话题为JavaFx layout包中提供的的每个布局窗格都给出了相应的概述和简单的示例。LayoutSample.java文件包含了本话题中UI的源码。LayoutSample.zip文件包含了示例应用的NetBeans工程。BorderPan
2、eBorderPane布局窗格提供了5个放置节点的区域：top, bottom, left, right, 和 center。图 1-1展示了border pane构建的布局样式。这些区域可以是任意大小，如果应用不需要某个区域，你可以不定义它，然后窗格就不会给这个区域分配空间。图 1-1 Border Pane 示例border pane可用于这种经典的外观：top:工具栏，bottom:状态栏，left:导航栏，right:附加信息，center:工作区。默认情况下，如果窗口比所有区域所需空间还大，多余的空间将被分配给中间区域。如果窗口比所需空间小，区域可能会重叠。重叠是由区域设置的顺序决定
3、的。例如，如果区域设置的顺序是 left, bottom, right，当窗口变得更小时，bottom区域会覆盖left区域，right区域会覆盖bottom区域。如果区域设置的顺序是 left, right, bottom，当窗口变得更小时，bottom区域会覆盖left和right区域。例 1-1展示了布局示例应用中创建border pane的代码。创建每个区域用到的布局窗格的函数会在本话题的剩余部分介绍。例 1-1 创建一个 Border Pane1. BorderPane border = new BorderPane();2. HBox hbox = addHBox()3. bord
4、er.setTop(hbox);4. border.setLeft(addVBox();5. addStackPane(hbox); / 在top区域的HBox中添加stack pane6. 7. border.setCenter(addGridPane();8. border.setRight(addFlowPane();注意一点，在本例中，border pane的bottom区域并没有被使用。如果你想要在bottom区域中添加什么，可以使用下面的语句并且替换其中的节点node为你选择的控件。1. border.setBottom(node);HBoxHBox布局窗格可以让你很容易地将一系列
5、节点排列到一行中。图 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-backg
6、round-color: #336699;);6. 7. Button buttonCurrent = new Button(Current);8. buttonCurrent.setPrefSize(100, 20);9. 10. Button buttonProjected = new Button(Projected);11. buttonProjected.setPrefSize(100, 20);12. hbox.getChildren().addAll(buttonCurrent, buttonProjected);13. 14. return hbox;15. 例 1-1中的se
7、tTop()函数将这个HBox窗格添加到border pane的top区域。其结果展示在图 1-3中。图 1-3 Border Pane 中的 HBox PaneVBoxVBox布局窗格和HBox很相似，除了这里所有节点是被排列到一个列中的。图 1-4展示了一个VBox窗格的示例。图 1-4 VBox Pane示例Padding 可用于设置节点到VBox窗格边界的距离。 Spacing可管理节点之间的距离。 Margins 可在单独的控件周围添加额外的空间。译者注：padding又称内边距、补白或留白，margin又称外边距、边界或额外空白区。它们的概念来源于CSS，即层叠样式表。从一般意义上
8、讲，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。（参考文章）例 1-3创建了一个包含一列选项的VBox窗格。例 1-3 创建一个VBox Pane1. public VBox addVBox(); 2. VBox vbox = new VBox();3. vbox.setPadding(new Insets(10);4. vbox.setSpacing(8);5. 6. Text title = new Text(D
9、ata);7. title.setFont(Font.font(Arial, FontWeight.BOLD, 14);8. vbox.getChildren().add(title);9. 10. Hyperlink options = new Hyperlink 11. new Hyperlink(Sales),12. new Hyperlink(Marketing),13. new Hyperlink(Distribution),14. new Hyperlink(Costs);15. 16. for (int i=0; i4; i+) 17. VBox.setMargin(option
10、si, new Insets(0, 0, 0, 8);18. vbox.getChildren().add(optionsi);19. 20. 21. return vbox;22. 例 1-1中的setLeft()函数将这个VBox窗格添加到了border pane的left区域。其结果展示在图 1-5中。图 1-5 Border Pane 中的 VBox PaneStackPaneStackPane布局窗格能将所有的节点放到一个堆栈中，其中每一个新的节点被添加到前一个节点的上方。这个布局模型能让你很容易地在一个形状或图像上面覆盖一个文本，或者用常用形状互相覆盖来创建复杂的形状。图 1-6展
11、示了一个通过在一个带有渐变色背景的矩形上堆放一个问号来创建的帮助图标。图 1-6 Stack Pane 示例Alignment 属性可以管理stack pane中子节点的对齐方式。这个属性影响所有的子节点，所以margin可以为stack中单独的子节点调整位置。例 1-4为帮助图标创建一个stack pane例 1-4 创建一个 Stack Pane1. public void addStackPane(HBox hb) 2. StackPane stack = new StackPane();3. Rectangle helpIcon = new Rectangle(30.0, 25.0);
12、4. helpIcon.setFill(new LinearGradient(0,0,0,1, true, CycleMethod.NO_CYCLE,5. new Stop6. 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);12. 13.
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); 17. 18. stack.getChildren().addAll(helpIcon, helpText);19. stack.setAlignment(Pos.CENTER_RIGHT); / 子节点右对齐20. StackPane.setMargin(helpT
14、ext, new Insets(0, 10, 0, 0); / 中间的 ?21. 22. hb.getChildren().add(stack); / 添加到 例 1-2 中的HBox中23. HBox.setHgrow(stack, Priority.ALWAYS); / 将所有多余空间都交给stack24. 例 1-4中的最后几行代码将stack pane添加到了例 1-2中创建的HBox窗格，并且总是将它放于窗格的最右边。结果展示在图 1-7中。图 1-7 HBox Pane 中的 Stack PaneGridPaneGridPane布局窗格能让你创建一个灵活的由行和列组成的网格来放置节点。节点可以被放于任何单元格内，也可以根据需要横跨多个单元格。一个grid pane对于创建表单或者任何以行和列组织的布局很有用。图 1-8展示了一个包含了图标、标题、副标题、正文和图表的grid pane，gridLinesVisible属性可设置是否显示网格线，它能标识出行和列以及行列之间的间隔。这个属性对于可
