在JavaFX中使用布局

1、在JavaFX中使用布局一、用內(nèi)置布局窗格一個(gè)JavaFx應(yīng)用可以通過(guò)設(shè)置每個(gè)UI元素的位置和大小來(lái)手動(dòng)地布局用戶界面。但是，一個(gè)更簡(jiǎn)單的做法是使用布局窗格。JavaFx SDK提供了多種布局容器類，叫做窗格，它們可簡(jiǎn)化對(duì)一些經(jīng)典布局的設(shè)置和管理，例如行、列、堆疊、平鋪等等。當(dāng)窗口縮放時(shí)，布局窗格會(huì)自動(dòng)地根據(jù)節(jié)點(diǎn)屬性重設(shè)其包含的所有節(jié)點(diǎn)的位置和大小。本話題為JavaFx layout包中提供的的每個(gè)布局窗格都給出了相應(yīng)的概述和簡(jiǎn)單的示例。LayoutSample.java文件包含了本話題中UI的源碼。LayoutSample.zip文件包含了示例應(yīng)用的NetBeans工程。BorderPane

2、BorderPane布局窗格提供了5個(gè)放置節(jié)點(diǎn)的區(qū)域：top, bottom, left, right, 和 center。圖 1-1展示了border pane構(gòu)建的布局樣式。這些區(qū)域可以是任意大小，如果應(yīng)用不需要某個(gè)區(qū)域，你可以不定義它，然后窗格就不會(huì)給這個(gè)區(qū)域分配空間。圖 1-1 Border Pane 示例 border pane可用于這種經(jīng)典的外觀：top:工具欄，bottom:狀態(tài)欄，left:導(dǎo)航欄，right:附加信息，center:工作區(qū)。默認(rèn)情況下，如果窗口比所有區(qū)域所需空間還大，多余的空間將被分配給中間區(qū)域。如果窗口比所需空間小，區(qū)域可能會(huì)重疊。重疊是由區(qū)域設(shè)置

3、的順序決定的。例如，如果區(qū)域設(shè)置的順序是 left, bottom, right，當(dāng)窗口變得更小時(shí)，bottom區(qū)域會(huì)覆蓋left區(qū)域，right區(qū)域會(huì)覆蓋bottom區(qū)域。如果區(qū)域設(shè)置的順序是 left, right, bottom，當(dāng)窗口變得更小時(shí)，bottom區(qū)域會(huì)覆蓋left和right區(qū)域。例 1-1 展示了布局示例應(yīng)用中創(chuàng)建border pane的代碼。創(chuàng)建每個(gè)區(qū)域用到的布局窗格的函數(shù)會(huì)在本話題的剩余部分介紹。例 1-1 創(chuàng)建一個(gè) Border Pane1. BorderPane border = new BorderPane();2. HBox hbox = addHB

4、ox()3. border.setTop(hbox);4. border.setLeft(addVBox();5. addStackPane(hbox); / 在top區(qū)域的HBox中添加stack pane6.  7. border.setCenter(addGridPane();8. border.setRight(addFlowPane();注意一點(diǎn)，在本例中，border pane的bottom區(qū)域并沒(méi)有被使用。如果你想要在bottom區(qū)域中添加什么，可以使用下面的語(yǔ)句并且替換其中的節(jié)點(diǎn)node為你選擇的控件。1. border.setBottom(node);HBoxHBo

5、x 布局窗格可以讓你很容易地將一系列節(jié)點(diǎn)排列到一行中。圖 1-2 展示了一個(gè) HBox 窗格的例子.圖 1-2 HBox 窗格示例 Padding 屬性可以設(shè)置節(jié)點(diǎn)到 HBox 邊緣的距離。 Spacing 可以管理節(jié)點(diǎn)之間的距離。Style可用來(lái)改變背景色。例 1-2 為一個(gè)工具欄創(chuàng)建了一個(gè)包含兩個(gè)按鈕的 HBox 窗格。例 1-2 創(chuàng)建一個(gè) HBox 窗格1. public HBox addHBox() 2. HBox hbox = new HBox();3. hbox.setPadding

6、(new Insets(15, 12, 15, 12);4. hbox.setSpacing(10);5. hbox.setStyle("-fx-background-color: #336699;");6.  7. Button buttonCurrent = new Button("Current");8. buttonCurrent.setPrefSize(100, 20);9.  10. Button buttonProjected = new Button("Projected");11. buttonP

7、rojected.setPrefSize(100, 20);12. hbox.getChildren().addAll(buttonCurrent, buttonProjected);13.  14. return hbox;15. 例 1-1中的 setTop() 函數(shù)將這個(gè) HBox 窗格添加到border pane的top區(qū)域。其結(jié)果展示在圖 1-3中。圖 1-3 Border Pane 中的  HBox Pane VBoxVBox 布局窗格和 HBox 很相似，除了這里所有節(jié)點(diǎn)是被排列到

8、一個(gè)列中的。圖 1-4 展示了一個(gè) VBox 窗格的示例。圖 1-4 VBox Pane示例 Padding 可用于設(shè)置節(jié)點(diǎn)到 VBox 窗格邊界的距離。 Spacing可管理節(jié)點(diǎn)之間的距離。 Margins 可在單獨(dú)的控件周圍添加額外的空間。譯者注：padding又稱內(nèi)邊距、補(bǔ)白或留白，margin又稱外邊距、邊界或額外空白區(qū)。它們的概念來(lái)源于CSS，即層疊樣式表。從一般意義上講，margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素

9、與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。（參考文章）例 1-3 創(chuàng)建了一個(gè)包含一列選項(xiàng)的 VBox 窗格。例 1-3 創(chuàng)建一個(gè)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("Data");7. title.setFont(Font.font("Arial

10、", 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; i<

11、;4; i+) 17. VBox.setMargin(optionsi, new Insets(0, 0, 0, 8);18. vbox.getChildren().add(optionsi);19. 20.  21. return vbox;22.  例 1-1 中的 setLeft() 函數(shù)將這個(gè) VBox 窗格添加到了border pane的left區(qū)域。其結(jié)果展示在 圖 1-5 中。圖 1-5 Border Pane 中的 VBox Pane StackPaneStackPane

12、0;布局窗格能將所有的節(jié)點(diǎn)放到一個(gè)堆棧中，其中每一個(gè)新的節(jié)點(diǎn)被添加到前一個(gè)節(jié)點(diǎn)的上方。這個(gè)布局模型能讓你很容易地在一個(gè)形狀或圖像上面覆蓋一個(gè)文本，或者用常用形狀互相覆蓋來(lái)創(chuàng)建復(fù)雜的形狀。圖 1-6展示了一個(gè)通過(guò)在一個(gè)帶有漸變色背景的矩形上堆放一個(gè)問(wèn)號(hào)來(lái)創(chuàng)建的幫助圖標(biāo)。圖 1-6 Stack Pane 示例 Alignment 屬性可以管理stack pane中子節(jié)點(diǎn)的對(duì)齊方式。這個(gè)屬性影響所有的子節(jié)點(diǎn)，所以margin可以為stack中單獨(dú)的子節(jié)點(diǎn)調(diào)整位置。例 1-4 為幫助圖標(biāo)創(chuàng)建一個(gè)stack pane例 1-4 創(chuàng)建一個(gè) Stack Pane1. public voi

13、d 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 Stop6. new Stop(0,Color.web("#4977A3"),7. new Stop(0.5, Color.web("#B0C6DA"),8. new Sto

14、p(1,Color.web("#9CB6CF"),);9. helpIcon.setStroke(Color.web("#D0E6FA");10. helpIcon.setArcHeight(3.5);11. helpIcon.setArcWidth(3.5);12.  13. Text helpText = new Text("?");14. helpText.setFont(Font.font("Verdana", FontWeight.BOLD, 18);15. helpText.setFill(C

15、olor.WHITE);16. helpText.setStroke(Color.web("#7080A0"); 17.  18. stack.getChildren().addAll(helpIcon, helpText);19. stack.setAlignment(Pos.CENTER_RIGHT); / 子節(jié)點(diǎn)右對(duì)齊20. StackPane.setMargin(helpText, new Insets(0, 10, 0, 0); / 中間的 "?"21.  22. hb.getChildren().add(stack); /

16、 添加到 例 1-2 中的HBox中23. HBox.setHgrow(stack, Priority.ALWAYS); / 將所有多余空間都交給stack24. 例 1-4 中的最后幾行代碼將stack pane添加到了例 1-2 中創(chuàng)建的 HBox 窗格，并且總是將它放于窗格的最右邊。結(jié)果展示在 圖 1-7 中。圖 1-7 HBox Pane 中的 Stack Pane GridPaneGridPane布局窗格能讓你創(chuàng)建一個(gè)靈活的由行和列組成的網(wǎng)格來(lái)放置節(jié)點(diǎn)。節(jié)點(diǎn)可以被放于任何單元格內(nèi)，也可以根據(jù)需要橫跨多個(gè)單元格。一個(gè)

17、grid pane對(duì)于創(chuàng)建表單或者任何以行和列組織的布局很有用。圖 1-8 展示了一個(gè)包含了圖標(biāo)、標(biāo)題、副標(biāo)題、正文和圖表的grid pane，gridLinesVisible屬性可設(shè)置是否顯示網(wǎng)格線，它能標(biāo)識(shí)出行和列以及行列之間的間隔。這個(gè)屬性對(duì)于可視化調(diào)試你的GridPane很有用。圖 1-8 Grid Pane示例 Gap屬性可用于管理行和列之間的間隔。Padding屬性可用于管理節(jié)點(diǎn)與網(wǎng)格邊緣的距離。Vertical和horizontal alignment屬性可用于管理單元格中單獨(dú)控件的對(duì)齊方式。例 1-5 創(chuàng)建了圖 1-8中的grid pan。例 1-

18、5 創(chuàng)建一個(gè) Grid Pane1. 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);6.  7. / Category 位于 column 2, row 18. Text category = new Text("Sales:");9. category.setFont(Font.font("Arial&qu

19、ot;, FontWeight.BOLD, 20);10. grid.add(category, 1, 0); 11.  12. / Title 位于 column 3, row 113. Text chartTitle = new Text("Current Year");14. chartTitle.setFont(Font.font("Arial", FontWeight.BOLD, 20);15. grid.add(chartTitle, 2, 0);16.  17. / Subtitle 位于 columns 2-3, ro

20、w 218. Text chartSubtitle = new Text("Goods and Services");19. grid.add(chartSubtitle, 1, 1, 2, 1);20.  21. / House icon 位于 column 1, rows 1-222. ImageView imageHouse = new ImageView(23. new Image(LayoutSample.class.getResourceAsStream("graphics/house.png");24. grid.add(imag

21、eHouse, 0, 0, 1, 2); 25.  26. / Left label 位于 column 1 (bottom), row 327. Text goodsPercent = new Text("Goodsn80%");28. GridPane.setValignment(goodsPercent, VPos.BOTTOM);29. grid.add(goodsPercent, 0, 2); 30.  31. / Chart 位于 columns 2-3, row 332. ImageView imageChart = new ImageVi

22、ew(33. new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png");34. grid.add(imageChart, 1, 2, 2, 1); 35.  36. / Right label 位于 column 4 (top), row 337. Text servicesPercent = new Text("Servicesn20%");38. GridPane.setValignment(servicesPercent, VPos.TOP);39.

23、 grid.add(servicesPercent, 3, 2);40.  41. return grid;42. 例 1-1  中的 setCenter() 函數(shù)將這個(gè)grid pane添加到了border pane的center區(qū)域。 結(jié)果展示在 圖 1-9 中。圖 1-9 Border Pane中的Grid Pane 當(dāng)窗口縮放時(shí)，grid pane中的節(jié)點(diǎn)會(huì)根據(jù)它們的布局約束進(jìn)行縮放。FlowPaneFlowPane 中的節(jié)點(diǎn)會(huì)連續(xù)地排列，并且會(huì)在窗格的邊界自動(dòng)換行（或列）。節(jié)點(diǎn)可以垂直地（按列）

24、或水平地（按行）流動(dòng)。一個(gè)垂直flow pane會(huì)在窗格的高度邊界上包裝節(jié)點(diǎn)，一個(gè)水平flow pane會(huì)在窗格的水平邊界上包裝節(jié)點(diǎn)。圖 1-10 展示了一個(gè)水平flow pane的例子，里面有多個(gè)帶有數(shù)字的圖標(biāo)。作為對(duì)比，如果把它換成垂直flow pane，第一列會(huì)包含1-4號(hào)圖標(biāo)，第二列中則包含5-8號(hào)圖標(biāo)。譯者注：包裝（wrap），指在窗格的邊界上發(fā)生自動(dòng)換行（或換列）。圖 1-10 水平 Flow Pane 示例 Gap屬性可以管理行和列之間的間隔大小。Padding屬性可以管理節(jié)點(diǎn)與窗格邊界間的距離。例 1-6 為一系列頁(yè)面圖標(biāo)創(chuàng)建了一個(gè)水平flow p

25、ane。例 1-6 創(chuàng)建一個(gè) Flow Pane1. 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;");8.  9. ImageView p

26、ages = new ImageView8;10. for (int i=0; i<8; i+) 11. pagesi = new ImageView(12. new Image(LayoutSample.class.getResourceAsStream(13. "graphics/chart_"+(i+1)+".png");14. flow.getChildren().add(pagesi);15. 16.  17. return flow;18. 例 1-1 中的setRight() 函數(shù)將這個(gè)水平flow pa

27、ne添加到了border pane的right區(qū)域。 其結(jié)果展示在 圖 1-11 中。圖 1-11 Border Pane 中的 Flow Pane TilePaneTile pane 和 flow pane 很相似。TilePane 布局將所有的節(jié)點(diǎn)放于一個(gè)網(wǎng)格中，并且每個(gè)單元格（或tile）保持一致的大小。節(jié)點(diǎn)可以水平方式（按行）排列或以豎直方式（按列）排列。水平布局會(huì)在tile pane的寬度邊界上包裝節(jié)點(diǎn)，豎直布局會(huì)在高度邊界上包裝節(jié)點(diǎn)。使用prefColumns 和 prefRows 屬性可設(shè)定窗格的偏好大小。Ga

28、p屬性可以管理行或列之間的間隔。Padding屬性可以管理節(jié)點(diǎn)與窗格邊界的距離。例 1-7 創(chuàng)建了一個(gè)水平tile pane，形成了與 圖 1-10 一樣的布局。例 1-7 創(chuàng)建一個(gè)Tile Pane1. 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:

29、DAE6F3;");7.  8. ImageView pages = new ImageView8;9. for (int i=0; i<8; i+) 10. pagesi = new ImageView(11. new Image(LayoutSample.class.getResourceAsStream(12. "graphics/chart_"+(i+1)+".png");13. tile.getChildren().add(pagesi);14. AnchorPaneAnchorPane 布局窗格能讓你將節(jié)點(diǎn)

30、錨定到窗格的頂部、底部、左側(cè)、右側(cè)或者中間。當(dāng)窗口縮放時(shí)，節(jié)點(diǎn)會(huì)保持其相對(duì)于錨點(diǎn)的位置。節(jié)點(diǎn)可被錨定到多個(gè)位置，并且同一位置可以錨定多個(gè)節(jié)點(diǎn)。圖 1-12 展示了一個(gè)anchor pane，它帶有一個(gè)GridPane部分用到的grid pane和一個(gè)包含兩個(gè)按鈕的HBox，它們分別被錨定到了窗格的頂部和右下角。圖 1-12  Anchor Pane 示例 例 1-8 創(chuàng)建了一個(gè)anchor pane，其中有一個(gè)節(jié)點(diǎn)被錨定到了窗格頂部，另一個(gè)節(jié)點(diǎn)被錨定到了窗格右下角。這里用了例 1-5 里面創(chuàng)建的grid pane作為top節(jié)點(diǎn)。例 1-8 創(chuàng)建

31、一個(gè) Anchor Pane1. public AnchorPane addAnchorPane(GridPane grid) 2. AnchorPane anchorpane = new AnchorPane();3. Button buttonSave = new Button("Save");4. Button buttonCancel = new Button("Cancel");5.  6. HBox hb = new HBox();7. hb.setPadding(new Insets(0, 10, 10, 10);8. hb.se

32、tSpacing(10);9. hb.getChildren().addAll(buttonSave, buttonCancel);10.  11. anchorpane.getChildren().addAll(grid,hb); / 添加 例 1-5中的 grid pane12. AnchorPane.setBottomAnchor(hb, 8.0);13. AnchorPane.setRightAnchor(hb, 5.0);14. AnchorPane.setTopAnchor(grid, 10.0);15.  16. return anchorpane;17. 下

33、面的語(yǔ)句將border pane的center區(qū)域替換成了這個(gè)anchor pane。1. border.setCenter(addAnchorPane(addGridPane();其結(jié)果展示在 圖 1-13 中。圖 1-13 Border Pane 中的 Anchor Pane 當(dāng)窗口縮放時(shí)，節(jié)點(diǎn)會(huì)根據(jù)它們的錨點(diǎn)保持各自的位置。從圖 1-14 中可以看出來(lái)，當(dāng)窗口變小時(shí)，被錨定到窗格底部的按鈕移動(dòng)到了離sales信息更近的位置。圖 1-14 縮放后的 Anchor Pane二、控制節(jié)點(diǎn)的大小和對(duì)齊使用JavaFx內(nèi)置布局窗格的一個(gè)主要優(yōu)點(diǎn)是節(jié)點(diǎn)的大小和

34、對(duì)齊可以交給窗格來(lái)完成。當(dāng)窗格發(fā)生了縮放，節(jié)點(diǎn)會(huì)依據(jù)其偏好的尺寸范圍進(jìn)行縮放。注意，不是所有節(jié)點(diǎn)都可以縮放。UI控件和布局窗格可以縮放，但是形狀、 Text 對(duì)象、Group 對(duì)象是不可縮放的，它們?cè)诓季种斜灰暈閯傮w。如果你想要在你的UI中做更多的尺寸控制，你可以直接設(shè)置它們的偏好尺寸范圍。然后布局窗格會(huì)使用你的這些設(shè)定決定控件的尺寸。要管理控件的位置，你可以使用布局窗格的對(duì)齊屬性。本話題針對(duì)節(jié)點(diǎn)的尺寸控制和對(duì)齊控制提供了簡(jiǎn)單示例。LayoutSizingAligning.java文件包含了本話題中使用的示例源碼，LayoutSizingAligning.zip文

35、件包含了這個(gè)示例的NetBeans工程?？刂乒?jié)點(diǎn)的大小布局通過(guò)調(diào)用 prefWidth(height) and prefHeight(width) 函數(shù)來(lái)獲取節(jié)點(diǎn)的偏好尺寸。默認(rèn)情況下，UI控件會(huì)基于其中的內(nèi)容計(jì)算出默認(rèn)的尺寸，并將它作為偏好尺寸。例如，一個(gè) Button 對(duì)象計(jì)算出來(lái)的尺寸是由文本的長(zhǎng)度、label中使用的字體，以及可能加入的圖像的尺寸共同決定的。通常情況下，計(jì)算出來(lái)的尺寸應(yīng)該剛好能讓控件和label完全顯示出來(lái)。UI控件也提供了默認(rèn)的最小尺寸和最大尺寸，這是由控件的特定用途決定的。例如，一個(gè)Button對(duì)象的最大尺

36、寸在默認(rèn)情況下被設(shè)為其偏好尺寸，因?yàn)槟阃ǔ２幌Ｍ粹o增長(zhǎng)到任意大。但是，一個(gè)ScrollPane對(duì)象的最大尺寸是沒(méi)有限制的，因?yàn)橥ǔＤ阈枰鼈冊(cè)鲩L(zhǎng)并填補(bǔ)空間。你可以使用節(jié)點(diǎn)默認(rèn)的尺寸限制，也可以自行設(shè)置這些值來(lái)達(dá)到你想要的效果。例如，圖 2-1 展示了一個(gè)border pane，里面有多個(gè)按鈕和一個(gè)list view，它們都具有默認(rèn)的大小。圖 2-1 計(jì)算出來(lái)的尺寸 假設(shè)你想要的外觀是圖 2-2那樣的，其中的UI控件根據(jù)你想要的約束調(diào)整其大小。圖 2-2 需要的尺寸 應(yīng)用程序經(jīng)常需要直接為控件設(shè)置最小尺寸、偏好尺寸以及最大尺寸的約束。以下部分給出了有關(guān)覆蓋計(jì)算尺寸

37、、自定義外觀的提示。把按鈕設(shè)為相同尺寸你可能遇到過(guò)確定每個(gè)按鈕寬高的問(wèn)題，并且你可能會(huì)將每個(gè)按鈕的寬高設(shè)為這個(gè)按鈕集合中最大的寬高。實(shí)際上更簡(jiǎn)單的做法是將這些工作交給布局窗格來(lái)完成。至于究竟用哪種窗格，這完全是由你想要實(shí)現(xiàn)的效果決定的。使用VBox圖 2-1 中的場(chǎng)景為右邊的按鈕建立了一個(gè)VBox布局窗格，并且使用了按鈕的計(jì)算尺寸。這些按鈕已經(jīng)有了相同的高度，所以我們只需要調(diào)整一下寬度。圖 2-2 中的場(chǎng)景使用了一個(gè) VBox 窗格，VBox窗格在默認(rèn)情況下會(huì)讓其寬度和最寬元素的偏好寬度相同，我們充分利用了這個(gè)特性。為了讓所有的按鈕都被縮放到VBox窗格

38、的寬度，每個(gè)按鈕的最大寬度被設(shè)為了Double.MAX_VALUE這個(gè)常量，這能讓一個(gè)控件無(wú)限地增長(zhǎng)。當(dāng)然也可以不使用最大值常量，而是將最大寬度設(shè)為一個(gè)特定值，比如80.0。例 2-1 展示了如何用一個(gè)VBox窗格建立一列具有相同寬度的按鈕。例 2-1 將一列按鈕設(shè)為相同寬度1. BorderPane border = new BorderPane();2. border.setPadding(new Insets(20, 0, 20, 20);3.  4. Button btnAdd = new Button("Add");5. Button btnD

39、elete = new Button("Delete");6. Button btnMoveUp = new Button("Move Up");7. Button btnMoveDown = new Button("Move Down");8.  9. btnAdd.setMaxWidth(Double.MAX_VALUE);10. btnDelete.setMaxWidth(Double.MAX_VALUE);11. btnMoveUp.setMaxWidth(Double.MAX_VALUE);12. btnMoveD

40、own.setMaxWidth(Double.MAX_VALUE);13.  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中的元素使用了一個(gè)border pane來(lái)布局。這一列按鈕被置于border pane的right區(qū)域，從而將

41、按鈕的寬度限制在最寬按鈕的偏好寬度。border pane的center區(qū)域會(huì)自動(dòng)擴(kuò)展來(lái)填充任何可用的空間，所以如果你將這個(gè)VBox放在center區(qū)域中，VBox窗格和其中的按鈕都會(huì)自動(dòng)擴(kuò)展。使用TilePane圖 2-1 中的場(chǎng)景使用了一個(gè) HBox 布局窗格來(lái)布局底部的按鈕，并使用了按鈕的計(jì)算尺寸。這些按鈕有不同的寬高。圖 2-2 中的場(chǎng)景使用了一個(gè)水平 TilePane 布局窗格，它在默認(rèn)情況下會(huì)讓每個(gè)小格(或cell)具有相同的尺寸，我們充分利用了這個(gè)特性。每個(gè)小格的尺寸剛好能容納下窗格中最大節(jié)點(diǎn)的偏好尺寸。為了讓這些按鈕縮

42、放到小格的尺寸，我們只需將它們的最大寬度和最大高度設(shè)為Double.MAX_VALUE這個(gè)常量。例 2-2展示了如何使用一個(gè)tile pane來(lái)創(chuàng)建一行具有相同寬高的按鈕。例 2-2 將一行按鈕設(shè)為相同寬高1. Button btnApply = new Button("Apply");2. Button btnContinue = new Button("Continue");3. Button btnExit = new Button("Exit");4. btnExit.setStyle("-fx-font-size:

43、 15pt;");5.  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);9.  10. TilePane tileButtons = new TilePane(Orientation.HORIZONTAL);11. tileButtons.setPaddin

44、g(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中的小格不會(huì)在窗口縮放時(shí)進(jìn)行縮放，所以如果按鈕被置于tile pane中，它們的大小將不會(huì)發(fā)生變化。注意一點(diǎn)，如果窗口的寬度變窄，tile pane中按鈕會(huì)發(fā)生位置的變化，但不會(huì)變小。將節(jié)點(diǎn)保持在偏好大小上當(dāng)stage縮放時(shí)，stage中的布局窗格可能會(huì)將或多或少的空間

45、分配給其中的控件。每個(gè)布局窗格有各自分配空間的規(guī)則，它會(huì)根據(jù)其中控件的最小尺寸、偏好尺寸、最大尺寸進(jìn)行分配。通常情況下，最大尺寸為Double.MAX_VALUE的控件會(huì)擴(kuò)展并填充空余的空間，而最大尺寸有限制的控件則不會(huì)擴(kuò)展。例如，一個(gè)ListView 對(duì)象的最大尺寸為無(wú)限，如果你想要限制它的高度為它的偏好尺寸，你可以將它的最大尺寸設(shè)為Control.USE_PREF_SIZE 常數(shù)，就像 例 2-3中展示的那樣。例 2-3 將最大高度設(shè)為偏好高度1. ListView<String> lvList = new ListView<String&g

46、t;();2. ObservableList<String> 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);默認(rèn)情況下，按鈕會(huì)增長(zhǎng)到它的偏好大小

47、。但是，如果沒(méi)有覆蓋按鈕的最小寬度，它會(huì)縮小到只顯示三個(gè)點(diǎn)(.)。為了防止一個(gè)按鈕的寬度變得比偏好寬度還要小，可以將它的最小寬度設(shè)為偏好寬度，就像例 2-4那樣。例 2-4 將最小寬度設(shè)為偏好寬度。1. Button btnMoveDown = new Button("Move Down");2. btnMoveDown.setMinWidth(Control.USE_PREF_SIZE);一個(gè)控件的偏好尺寸一開(kāi)始是基于計(jì)算出來(lái)的結(jié)果的。你可以覆蓋默認(rèn)設(shè)置，并設(shè)置偏好尺寸為你想要的尺寸。以下語(yǔ)句覆蓋了一個(gè)list view的偏好寬度。1. lvList.setPrefWid

48、th(150.0);防止縮放如果你不想讓一個(gè)控件的大小發(fā)生變化，可以將它的最小尺寸、最大尺寸和偏好尺寸都設(shè)為一樣的大小。如果僅僅要防止寬度（或高度）改變，只需將寬度（或高度）的約束尺寸設(shè)為相同值。在例 2-5中，我們創(chuàng)建了一個(gè)所有尺寸約束都是相同寬高的list，那么這個(gè)list的大小將不會(huì)隨著窗口的縮放而縮放。我們還創(chuàng)建了一個(gè)所有寬度約束都設(shè)為相同值的按鈕。例 2-5 設(shè)置尺寸約束來(lái)防止縮放1. ListView<String> lvList = new ListView<String>();2. lvList.setMinSize(150.0, Control.USE

49、_PREF_SIZE);3. lvList.setMaxSize(150.0, Control.USE_PREF_SIZE);4.  5. Button btnDelete = new Button("Delete");6. btnDelete.setMinWidth(80.0);7. btnDelete.setPrefWidth(80.0);8. btnDelete.setMaxWidth(80.0);對(duì)齊內(nèi)容每個(gè)布局窗格都有一個(gè)默認(rèn)的對(duì)齊其中節(jié)點(diǎn)的方式。例如，在 HBox 和 VBox 布局窗格中，節(jié)點(diǎn)是頂部對(duì)齊和左對(duì)齊

50、的。在TilePane 和 FlowPane 中，節(jié)點(diǎn)是居中對(duì)齊的。窗格本身一般默認(rèn)是頂部對(duì)齊和左對(duì)齊的。你可以通過(guò)使用窗格的setAlignment()函數(shù)來(lái)管理節(jié)點(diǎn)和窗格的對(duì)齊方式。以下是javafx.geometry 包中的一些enum類，其中包含了很多控制對(duì)齊的常量：· HPos - 包含了確定水平對(duì)齊的值。· Pos - 包含了確定水平及豎直對(duì)齊的值。其中下劃線左側(cè)的值確定了豎直對(duì)齊方式，下劃線右側(cè)的值確定了水平對(duì)齊方式。例如， Pos.BOTTOM_LEFT 將一個(gè)節(jié)點(diǎn)在垂直方向上置

51、于底部，水平方向上置于最左邊。· VPos - 包含了確定豎直對(duì)齊的值。圖 2-3 是通過(guò) 例 2-6 中的代碼建立的， 如果不指定任何的對(duì)齊約束，布局窗格被置于左上角。圖 2-3 默認(rèn)的位置 例 2-6 創(chuàng)建一個(gè)采用默認(rèn)對(duì)齊方式的UI1. GridPane grid = new GridPane();2. grid.setHgap(10);3. grid.setVgap(12);4.  5. HBox hbButtons = new HBox();6. hbButtons.setSpacing(10.0);7.  

52、;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;");12.  13. Label lblName = new Label("User name:");14. TextField tfName = n

53、ew TextField();15. Label lblPwd = new Label("Password:");16. PasswordField pfPwd = new PasswordField();17.  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.

54、grid.add(hbButtons, 0, 2, 2, 1);24. 假設(shè)你想要的外觀是像圖 2-4那樣的，將布局窗格居中對(duì)齊，并且改變控件默認(rèn)的對(duì)齊方式。圖 2-4 需要的位置 以下部分提供了一些有關(guān)覆蓋默認(rèn)位置的小提示。將Grid居中為了居中例 2-6中場(chǎng)景里的grid，可使用如下語(yǔ)句：1. grid.setAlignment(Pos.CENTER);對(duì)齊列中的控件在想要實(shí)現(xiàn)的布局中，label是右對(duì)齊的，field是左對(duì)齊的。為了在grid中實(shí)現(xiàn)這一點(diǎn)，可使用ColumnConstraints 類來(lái)定義每個(gè)列并設(shè)置水平對(duì)齊約束。例 2-7 為 例

55、 2-6 中的grid定義了列。例 2-7 定義grid中的列1. GridPane grid = new GridPane();2. grid.setAlignment(Pos.CENTER);3. grid.setHgap(10);4. grid.setVgap(12);5.  6. ColumnConstraints column1 = new ColumnConstraints();7. column1.setHalignment(HPos.RIGHT);8. grid.getColumnConstraints().add(column1); 9.  10

56、. ColumnConstraints column2 = new ColumnConstraints();11. column2.setHalignment(HPos.LEFT);12. grid.getColumnConstraints().add(column2); 另一個(gè)讓一列中的控件右對(duì)齊的方式是使用一個(gè)  VBox 布局窗格，然后使用setAlignment()函數(shù)，就像下面語(yǔ)句中那樣：1. VBox vbox = new VBox;2. vbox.setAlignment(Pos.CENTER_RIGHT);居中按鈕按鈕被置于一個(gè)HBox 

57、窗格中，這個(gè)窗格在grid中橫跨了兩列。下列語(yǔ)句將例 2-6中g(shù)rid里的按鈕居中對(duì)齊：1. hbButtons.setAlignment(Pos.CENTER);HBox 窗格的setAlignment() 函數(shù)會(huì)將HBox在其布局空間中居中對(duì)齊，并且它也會(huì)將其內(nèi)部的節(jié)點(diǎn)居中對(duì)齊。你可能更希望不僅這個(gè)HBox在這一行中居中，并且其中的按鈕還能在底部對(duì)齊，就像圖 2-5中那樣。圖 2-5 覆蓋默認(rèn)位置并將按鈕向底部對(duì)齊 為了實(shí)現(xiàn)這樣的布局，可以將這個(gè)HBox置于一個(gè)只包含一個(gè)小格的內(nèi)部grid中，并將這個(gè)grid置于外層grid的第三行中。然后在內(nèi)部grid上設(shè)置

58、對(duì)齊約束來(lái)將它居中對(duì)齊，并且在HBox中設(shè)置一個(gè)對(duì)齊約束來(lái)將其中的內(nèi)容向底部對(duì)齊，就像例 2-8中那樣。例 2-8 將按鈕居中并向底部對(duì)齊1. hbButtons.setAlignment(Pos.BOTTOM_CENTER);2. hbButtons.getChildren().addAll(btnSubmit, btnClear, btnExit);3.  4. GridPane innergrid = new GridPane();5. innergrid.setAlignment(Pos.CENTER);6. innergrid.add(hbButtons, 0, 0);7.

59、 grid.add(innergrid, 0, 2, 2, 1);二、用CSS設(shè)定布局窗格的樣式布局窗格使用了諸如padding, spacing, 和 alignment這些屬性來(lái)管理窗格的外觀元素。層疊樣式表（CSS）能讓你定義一些屬性，并將這些屬性應(yīng)用于多個(gè)布局窗格上，這可以為你的JavaFx程序提供一個(gè)統(tǒng)一的外觀。你也可以使用CSS自定義單獨(dú)的布局窗格。本話題使用了 使用內(nèi)置布局窗格 中的示例，來(lái)向您展示使用CSS為不同布局窗格定義樣式的例子。圖 3-1 展示了我們創(chuàng)建的新樣式。圖 3-1 采用自定義樣式的布局示例 LayoutSampleCSS

60、.java 包含了建立這個(gè)UI的源碼。LayoutSampleCSS.zip 包含了這個(gè)示例程序的NetBeans工程。創(chuàng)建樣式定義不像button、check box這些控件，它們都有著各自的樣式類 .button 和 .check-box等等，布局窗格沒(méi)有預(yù)定義的樣式類。要想為你的布局窗格定義樣式，你必須創(chuàng)建一個(gè)樣式表并定義你想要用的樣式類。然后，在你的代碼中，當(dāng)你創(chuàng)建這些窗格時(shí)，將合適的樣式類應(yīng)用上去。例如，你如果想要你所有的HBox窗格擁有相同的背景色，padding和spacing屬性，可以創(chuàng)建一個(gè)名為 .hbox 的樣式類，如 例 3-1。例 3-1 HBox窗格的示例樣式1. .hbox 2. -fx-background-color: #2f4f4f;3. -fx-