# JavaFX 布局窗格 > 原文： [http://zetcode.com/gui/javafx/layoutpanes/](http://zetcode.com/gui/javafx/layoutpanes/) JavaFX 教程的這一部分涵蓋了節點的布局管理。 我們提到了以下布局窗格：`FlowPane`，`HBox`，`BorderPane`，`AnchorPane`，`GridPane`和`MigPane`。 另外，我們展示了如何使用`Pane`在絕對坐標中定位節點。 布局窗格是用于在 JavaFX 應用的場景圖中靈活，動態地排列 UI 控件的容器。 調整窗口大小時，布局窗格會自動調整其位置和大小。 JavaFX 具有以下內置布局窗格： * `FlowPane` – 在環繞在窗格邊界上的流中布置其子項。 * `HBox` – 將其內容節點水平排列在一行中。 * `VBox` – 將其內容節點垂直排列在單個列中。 * `AnchorPane` – 將節點錨定到窗格的頂部，底部，左側或中心。 * `BorderPane` – 將其內容節點布置在頂部，底部，右側，左側或中央區域。 * `StackPane` – 將其內容節點放置在從后到前的單個棧中。 * `TilePane` – 將其內容節點放置在大小統??一的布局單元或圖塊中。 * `GridPane` – 將其內容節點放置在行和列的網格中。 為了創建更復雜的布局，可以在 JavaFX 應用中嵌套不同的容器。 除了`GridPane`之外，內置的布局管理器是非常基本的，不適用于更復雜的應用。 更復雜的布局應使用`GridPane`或第三方`MigPane`。 ## 絕對布局 `Pane`節點可用于在絕對坐標中定位節點。 復雜的布局應始終使用布局管理器創建； 絕對布局用于特定情況（例如，定位圖或圖像）。 `AbsoluteLayoutEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.Line; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program positions three shapes * using absolute coordinates. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class AbsoluteLayoutEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Rectangle rect = new Rectangle(25, 25, 50, 50); rect.setFill(Color.CADETBLUE); Line line = new Line(90, 40, 230, 40); line.setStroke(Color.BLACK); Circle circle = new Circle(130, 130, 30); circle.setFill(Color.CHOCOLATE); root.getChildren().addAll(rect, line, circle); Scene scene = new Scene(root, 250, 220, Color.WHITESMOKE); stage.setTitle("Absolute layout"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 此示例顯示了三種形狀：矩形，直線和圓形。 使用絕對坐標定位形狀。 ```java Pane root = new Pane(); ``` 實例化了`Pane`節點。 要在絕對坐標中定位節點，我們使用`Pane`節點。 ```java Rectangle rect = new Rectangle(25, 25, 50, 50); ``` 創建一個`Rectangle`形狀。 前兩個參數是 x 和 y 坐標，后兩個參數是矩形的寬度和高度。 左上角的矩形從其父節點的`x = 25`和`y = 25`開始。 ```java Line line = new Line(90, 40, 230, 40); line.setStroke(Color.BLACK); Circle circle = new Circle(130, 130, 30); circle.setFill(Color.CHOCOLATE); ``` `Line`和`Circle`形狀在其構造器中采用絕對坐標值。 線的顏色通過`setStroke()`方法更改，圓內部的顏色通過`setFill()`方法更改。 ```java root.getChildren().addAll(rect, line, circle); ``` 所有這三個形狀都添加到根節點。  圖：絕對定位 ## `FlowPane` `FlowPane`將節點放置在行或列中，當所有節點都無法顯示時，將其包裹起來。 流窗格的默認方向為水平。 `FlowPane`的用法非常有限。 `FlowPaneEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Orientation; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.FlowPane; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses a FlowPane to position * twenty buttons. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class FlowPaneEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { FlowPane root = new FlowPane(Orientation.HORIZONTAL, 5, 5); root.setPadding(new Insets(5)); for (int i=1; i<=20; i++) { root.getChildren().add(new Button(String.valueOf(i))); } Scene scene = new Scene(root, 300, 250); stage.setTitle("FlowPane"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們在`FlowPane`中放置了二十個按鈕。 如果無法將所有按鈕都顯示在一行中，則將它們包裝在其他行中。 ```java FlowPane root = new FlowPane(Orientation.HORIZONTAL, 5, 5); ``` 將創建水平`FlowPane`。 第二個和第三個參數指定窗格中節點之間的水平和垂直間隙。 ```java root.setPadding(new Insets(5)); ``` `setPadding()`方法在窗格周圍設置一些空間。 ```java for (int i=1; i<=20; i++) { root.getChildren().add(new Button(String.valueOf(i))); } ``` 二十個按鈕將添加到流窗格中。 這些按鈕顯示整數值。  圖：`FlowPane` ## `HBox` `HBox`將其子級布置在單個水平行中。 該窗格與其他布局管理器一起使用以創建布局。 它適合于進行基本布局。 `RowOfButtonsEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program shows four buttons in * a right-aligned, horizontal row with a HBox. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class RowOfButtonsEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(5); root.setPadding(new Insets(10)); root.setAlignment(Pos.BASELINE_RIGHT); Button prevBtn = new Button("Previous"); Button nextBtn = new Button("Next"); Button cancBtn = new Button("Cancel"); Button helpBtn = new Button("Help"); root.getChildren().addAll(prevBtn, nextBtn, cancBtn, helpBtn); Scene scene = new Scene(root); stage.setTitle("Row of buttons"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例在一行中顯示了四個按鈕。 該行右對齊。 按鈕之間有一些空間。 ```java HBox root = new HBox(5); ``` `HBox`窗格以一定的間距創建。 ```java root.setPadding(new Insets(10)); ``` 我們在`HBox`周圍創建一些填充 ```java root.setAlignment(Pos.BASELINE_RIGHT); ``` `setAlignment()`方法將節點右對齊。 ```java root.getChildren().addAll(prevBtn, nextBtn, cancBtn, helpBtn); ``` 這些按鈕將添加到容器中。  圖：使用`HBox`創建的一排按鈕 ## `BorderPane` `BorderPane`將子項放在頂部，左側，右側，底部和中央位置。 它可以用來創建經典外觀的應用布局。 `BorderPaneEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program places five labels into * the BorderPane's five areas. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ class MyLabel extends Label { public MyLabel(String text) { super(text); setAlignment(Pos.BASELINE_CENTER); } } public class BorderPaneEx extends Application { private BorderPane root; private final int SIZE = 60; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { root = new BorderPane(); root.setTop(getTopLabel()); root.setBottom(getBottomLabel()); root.setLeft(getLeftLabel()); root.setRight(getRightLabel()); root.setCenter(getCenterLabel()); Scene scene = new Scene(root, 350, 300); stage.setTitle("BorderPane"); stage.setScene(scene); stage.show(); } private Label getTopLabel() { Label lbl = new MyLabel("Top"); lbl.setPrefHeight(SIZE); lbl.prefWidthProperty().bind(root.widthProperty()); lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 1 0;" + "-fx-border-color: gray; -fx-font-weight: bold"); return lbl; } private Label getBottomLabel() { Label lbl = new MyLabel("Bottom"); lbl.setPrefHeight(SIZE); lbl.prefWidthProperty().bind(root.widthProperty()); lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 1 0 0 0;" + "-fx-border-color: gray; -fx-font-weight: bold"); return lbl; } private Label getLeftLabel() { Label lbl = new MyLabel("Left"); lbl.setPrefWidth(SIZE); lbl.prefHeightProperty().bind(root.heightProperty().subtract(2*SIZE)); lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 1 0 0;" + "-fx-border-color: gray; -fx-font-weight: bold"); return lbl; } private Label getRightLabel() { Label lbl = new MyLabel("Right"); lbl.setPrefWidth(SIZE); lbl.prefHeightProperty().bind(root.heightProperty().subtract(2*SIZE)); lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 0 1;" + "-fx-border-color: gray; -fx-font-weight: bold"); return lbl; } private Label getCenterLabel() { Label lbl = new MyLabel("Center"); lbl.setStyle("-fx-font-weight: bold"); lbl.prefHeightProperty().bind(root.heightProperty().subtract(2*SIZE)); lbl.prefWidthProperty().bind(root.widthProperty().subtract(2*SIZE)); return lbl; } public static void main(String[] args) { launch(args); } } ``` 該示例將五個標簽放置在五個`BorderPane's`區域中。 ```java root.setTop(getTopLabel()); root.setBottom(getBottomLabel()); root.setLeft(getLeftLabel()); root.setRight(getRightLabel()); root.setCenter(getCenterLabel()); ``` 使用`setTop()`，`setBottom()`，`setLeft()`，`setRight()`和`setCenter()`方法定位節點。 ```java Label lbl = new MyLabel("Top"); lbl.setPrefHeight(SIZE); ``` 在這里，我們使用`setPrefHeight()`方法增加頂部標簽的首選高度。 優選的高度是最初顯示標簽的高度。 ```java lbl.prefWidthProperty().bind(root.widthProperty()); ``` `BorderPane`尊重其子級的首選大小。 如果是標簽，則其大小足以顯示其文本。 我們將標簽的首選`width`屬性綁定到窗格的相應屬性。 這樣，標簽將從窗格的左到右放大。 ```java lbl.setStyle("-fx-border-style: dotted; -fx-border-width: 0 0 1 0;" + "-fx-border-color: gray; -fx-font-weight: bold"); ``` 我們更改標簽的樣式以便清楚地看到其邊界。  圖：`BorderPane` ## `AnchorPane` `AnchorPane`將子節點的邊緣錨定到與錨定窗格的邊緣偏移的位置。 如果錨定窗格設置了邊框或填充，則將從這些插圖的內部邊緣開始測量偏移。 `AnchorPane`是一個簡單的布局窗格，必須與其他布局窗格一起使用才能創建有意義的布局。 `CornerButtonsEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program shows two buttons in the * bottom-right corner of the window. It uses * an AnchorPane and an HBox. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class CornerButtonsEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { AnchorPane root = new AnchorPane(); Button okBtn = new Button("OK"); Button closeBtn = new Button("Close"); HBox hbox = new HBox(5, okBtn, closeBtn); root.getChildren().addAll(hbox); AnchorPane.setRightAnchor(hbox, 10d); AnchorPane.setBottomAnchor(hbox, 10d); Scene scene = new Scene(root, 300, 200); stage.setTitle("Corner buttons"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用`AnchorPane`和`HBox`將兩個按鈕放置在窗口的右下角。 ```java AnchorPane root = new AnchorPane(); ``` `AnchorPane`是場景圖的根節點。 ```java Button okBtn = new Button("OK"); Button closeBtn = new Button("Close"); HBox hbox = new HBox(5, okBtn, closeBtn); ``` 這兩個按鈕位于`HBox`中。 我們使用一個構造器，將直接放置按鈕對象。 ```java root.getChildren().addAll(hbox); ``` `hbox`已添加到錨定窗格。 ```java AnchorPane.setRightAnchor(hbox, 10d); ``` `setRightAnchor()`方法將`hbox`錨定到窗格的右邊緣。 第二個參數給出了相對于邊緣的一些偏移。 ```java AnchorPane.setBottomAnchor(hbox, 10d); ``` `setBottomAnchor()`方法將`hbox`錨定到窗格的底部邊緣。  圖：角按鈕 ## `GridPane` `GridPane`將其節點放入行和列的網格中。 節點可以跨越多行或多列。 `GridPane`是最靈活的內置布局窗格。 `setGridLinesVisible()`可以顯示布局網格的線條，這使我們可以直觀地調試布局。 `NewFolderEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.HPos; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.control.TextField; import javafx.scene.layout.ColumnConstraints; import javafx.scene.layout.GridPane; import javafx.scene.layout.Priority; import javafx.scene.layout.RowConstraints; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program creates a NewFolder layout with * a GridPane. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class NewFolderEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { GridPane root = new GridPane(); root.setHgap(8); root.setVgap(8); root.setPadding(new Insets(5)); ColumnConstraints cons1 = new ColumnConstraints(); cons1.setHgrow(Priority.NEVER); root.getColumnConstraints().add(cons1); ColumnConstraints cons2 = new ColumnConstraints(); cons2.setHgrow(Priority.ALWAYS); root.getColumnConstraints().addAll(cons1, cons2); RowConstraints rcons1 = new RowConstraints(); rcons1.setVgrow(Priority.NEVER); RowConstraints rcons2 = new RowConstraints(); rcons2.setVgrow(Priority.ALWAYS); root.getRowConstraints().addAll(rcons1, rcons2); Label lbl = new Label("Name:"); TextField field = new TextField(); ListView view = new ListView(); Button okBtn = new Button("OK"); Button closeBtn = new Button("Close"); GridPane.setHalignment(okBtn, HPos.RIGHT); root.add(lbl, 0, 0); root.add(field, 1, 0, 3, 1); root.add(view, 0, 1, 4, 2); root.add(okBtn, 2, 3); root.add(closeBtn, 3, 3); Scene scene = new Scene(root, 280, 300); stage.setTitle("New folder"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 此示例的布局由標簽，文本字段，列表視圖和兩個按鈕組成。 ```java GridPane root = new GridPane(); ``` 創建`GridPane`的實例。 ```java root.setHgap(8); root.setVgap(8); ``` 這兩種方法在節點之間創建了水平和垂直間隙。 ```java ColumnConstraints cons1 = new ColumnConstraints(); cons1.setHgrow(Priority.NEVER); root.getColumnConstraints().add(cons1); ColumnConstraints cons2 = new ColumnConstraints(); cons2.setHgrow(Priority.ALWAYS); root.getColumnConstraints().addAll(cons1, cons2); ``` 在布局中，我們需要使第二列可擴展。 默認情況下，網格窗格以其首選大小顯示其子級，并且在窗口放大時不會放大它們。 我們創建列約束，將第二列的水平增長優先級設置為`Priority.ALWAYS`。 （沒有特定的方法可以執行此操作。）最后，這會使文本字段和列表視圖控件隨著窗口的放大而沿水平方向增長。 ```java RowConstraints rcons1 = new RowConstraints(); rcons1.setVgrow(Priority.NEVER); RowConstraints rcons2 = new RowConstraints(); rcons2.setVgrow(Priority.ALWAYS); root.getRowConstraints().addAll(rcons1, rcons2); ``` 以類似的方式，使第二行可增長。 通過使第二列和第二行可增長，列表視圖將在兩個方向上都增長，從而占用了大部分客戶區。 ```java Label lbl = new Label("Name:"); TextField field = new TextField(); ListView view = new ListView(); Button okBtn = new Button("OK"); Button closeBtn = new Button("Close"); ``` 將創建五個控件。 ```java GridPane.setHalignment(okBtn, HPos.RIGHT); ``` `setHalignment()`方法使`okBtn`右對齊。 ```java root.add(lbl, 0, 0); ``` 標簽控件將添加到網格。 `add()`方法的前兩個參數是列和行索引。 索引從零開始。 ```java root.add(field, 1, 0, 3, 1); ``` 重載的`add()`方法還指定列和行跨度。 文本字段轉到第二列和第一行。 它跨越三列和一行。  圖：新文件夾 ## `MigPane` `MigPane`是一個非常強大的第三方布局管理器。 它使用`MigLayout`管理器，可用于 Swing，SWT 和 JavaFX。 強烈建議考慮這位管理器。  圖：`MigPane` JAR 要使用`MigPane`，必須將 JAR 包含到項目庫中。 用于源代碼和 javadoc 的 JAR 是可選的。 `MigPane`使用字符串約束進行布局。 有四種約束：常規約束，列約束，行約束和控制約束。 `MigPane`中有幾種布局模式。 網格模式是默認模式，并且是可用模式中最靈活的一種。 `MigLayoutWindowsEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Control; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.stage.Stage; import org.tbee.javafx.scene.layout.MigPane; /** * ZetCode JavaFX tutorial * * This program creates a Windows layout with * a MigPane. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class MigLayoutWindowsEx extends Application { MigPane root; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { root = new MigPane("", "[grow][]", "[][][grow][]"); Scene scene = new Scene(root); Label lbl = new Label("Windows"); Button actBtn = new Button("Activate"); Button closeBtn = new Button("Close"); Button okBtn = new Button("OK"); Button helpBtn = new Button("Help"); ListView listView = new ListView(); createLayout(lbl, listView, actBtn, closeBtn, helpBtn, okBtn); stage.setTitle("Windows"); stage.setScene(scene); stage.show(); } private void createLayout(Control...arg) { root.add(arg[0], "wrap"); root.add(arg[1], "w 200, h 200, span 2 2, grow"); root.add(arg[2], "wrap"); root.add(arg[3], "top, wrap"); root.add(arg[4]); root.add(arg[5], "skip"); } public static void main(String[] args) { launch(args); } } ``` 該示例使用六個控件，四個按鈕，一個標簽和一個列表視圖。 ```java root = new MigPane("", "[grow][]", "[][][grow][]"); ``` `MigPane`構造器的三個字符串指定常規約束，列約束和行約束。 `[grow][]`約束指定有兩列，第一列是可增長的。 同樣，`[][][grow][]`約束告訴`MigPane`有四行，第三行是可增長的。 如果將`debug`約束放入常規約束中，則可以直觀地調試布局。 ```java createLayout(lbl, listView, actBtn, closeBtn, helpBtn, okBtn); ``` 布局的創建委托給`createLayout()`方法。 ```java root.add(arg[0], "wrap"); ``` 標簽控件進入第一行和第一列。 可以（但不是必需）明確指定單元格索引。 `wrap`約束開始一個新行。 ```java root.add(arg[1], "w 200, h 200, span 2 2, grow"); ``` `w`和`h`約束指定列表視圖控件的初始寬度和高度。 最佳實踐是，只有布局管理器才能設置其組件的大小。 換句話說，直接在控件上調用方法行`setMinSize()`是一種不好的做法。 `span`約束使控件跨越兩列和兩行。 最后，`grow`約束使控件在調整窗口大小時向兩個方向擴展。 ```java root.add(arg[2], "wrap"); ``` 第三個控件是“激活”按鈕。 它在列表視圖旁邊。 放置此控件后，我們開始新的一行。 ```java root.add(arg[3], "top, wrap"); ``` “關閉”按鈕在列表視圖旁邊，在“激活”按鈕下面。 `top`約束將按鈕對齊到其單元格的頂部。 ```java root.add(arg[4]); ``` 我們使列表視圖跨兩行。 將前一個按鈕放入兩行后，下一個按鈕會自動進入列表視圖下方。 ```java root.add(arg[5], "skip"); ``` 最后一個按鈕跳過一列。 因此它被放置在第三列和第四行。  圖：窗口 layout created with a MigPane 在 JavaFX 教程的這一部分中，我們提到了布局窗格。