JavaFX Layout 在 javafx.layout package 裡面，有以下類別 HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel，Pane 類別是所有類別的母類別。
create a layout
建立 layout 有以下步驟
create node
以 layout 的類別產生 instance
設定 layout 屬性
將 nodes 加入 layout
create nodes
ex:
//Creating a text field
TextField textField = new TextField();
//Creating the play button
Button playButton = new Button("Play");
//Creating the stop button
Button stopButton = new Button("stop");產生 layout instance
HBox hbox = new HBox();設定layout屬性
hbox.setSpacing(10);將 nodes 加入 layout
//Creating a Group object
hbox.getChildren().addAll(textField, playButton, stopButton);Layouts
| 類別 | 抽象基底類別 | 說明 |
|---|---|---|
| Region | 抽象基底類別 | 支援背景、邊框、padding、最小/最大尺寸等，不直接用於排版。 |
| Layout 類別 | 排版方式 | 特性 / 用途 |
| Pane | 手動設定每個子節點的位置 | 最基本容器，無自動排版功能。需搭配 setLayoutX/Y() 使用。 |
| HBox | 水平排版 | 將子節點由左至右排列，可設定間距、對齊與每個節點的伸縮比例。 |
| VBox | 垂直排版 | 將子節點由上至下排列，支援間距、對齊、節點高度調整等。 |
| StackPane | 子節點重疊排版 | 最後加入的節點在最上層，適合建立背景圖層或合成式 UI。 |
| BorderPane | 五區域：Top / Bottom / Left / Right / Center | 適合標準應用主畫面分區（類似 HTML 的 frameset）。分成 Top/Bottom/Left/Right/Center 五個區域 |
| GridPane | 表格樣式的列／欄排列 | 可自由定義 row/column spans，類似 HTML table。 |
| FlowPane | 水平／垂直「流動」排列 | 當空間不夠時，自動換行／換列（類似 CSS flex-wrap: wrap）。 |
| TilePane | 固定格大小的網格排列 | 每個子節點占用相同大小的 tile 區塊，整齊對齊適合 icon 排列等用途。 |
| AnchorPane | 錨定（Anchor）子節點邊距 | 可將節點固定在上下左右的邊界距離，類似 CSS 的 absolute 定位。 |
| ScrollPane | 提供可滾動內容區塊 | 包含一個子節點，支援垂直與水平捲軸。 |
另外在 javafx.scene.control.TabPane，雖然名稱是 TabPane，但並不是一種 layout，而是 control 元件，TabPane 可建立一個多頁籤的畫面，每一個頁籤，都能容納一種內容節點，通常是 Pane
Example
以下實例，是利用 TabPan 製作這些 Pane layout 的 sample
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class LayoutExample extends Application {
@Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
tabPane.getTabs().add(tab("Pane", createPaneExample()));
tabPane.getTabs().add(tab("HBox", createHBoxExample()));
tabPane.getTabs().add(tab("VBox", createVBoxExample()));
tabPane.getTabs().add(tab("StackPane", createStackPaneExample()));
tabPane.getTabs().add(tab("BorderPane", createBorderPaneExample()));
tabPane.getTabs().add(tab("GridPane", createGridPaneExample()));
tabPane.getTabs().add(tab("FlowPane", createFlowPaneExample()));
tabPane.getTabs().add(tab("TilePane", createTilePaneExample()));
tabPane.getTabs().add(tab("AnchorPane", createAnchorPaneExample()));
tabPane.getTabs().add(tab("ScrollPane", createScrollPaneExample()));
Scene scene = new Scene(tabPane, 600, 500);
primaryStage.setTitle("JavaFX Layout Example");
primaryStage.setScene(scene);
primaryStage.show();
}
private Tab tab(String title, Pane content) {
Tab tab = new Tab(title);
tab.setContent(content);
return tab;
}
private Pane createPaneExample() {
Pane pane = new Pane();
Rectangle rect = new Rectangle(50, 50, 100, 100);
rect.setFill(Color.CORNFLOWERBLUE);
pane.getChildren().add(rect);
return pane;
}
private Pane createHBoxExample() {
HBox hbox = new HBox(10, new Button("One"), new Button("Two"), new Button("Three"));
hbox.setPadding(new Insets(10));
hbox.setAlignment(Pos.CENTER);
return hbox;
}
private Pane createVBoxExample() {
VBox vbox = new VBox(10, new Label("Top"), new Button("Middle"), new TextField("Bottom"));
vbox.setPadding(new Insets(10));
vbox.setAlignment(Pos.CENTER);
return vbox;
}
private Pane createStackPaneExample() {
StackPane stackPane = new StackPane();
Rectangle background = new Rectangle(200, 100, Color.LIGHTGRAY);
Label label = new Label("On Top");
stackPane.getChildren().addAll(background, label);
stackPane.setPadding(new Insets(10));
return stackPane;
}
private Pane createBorderPaneExample() {
BorderPane borderPane = new BorderPane();
borderPane.setTop(new Label("Top"));
borderPane.setBottom(new Label("Bottom"));
borderPane.setLeft(new Button("Left"));
borderPane.setRight(new Button("Right"));
borderPane.setCenter(new TextArea("Center"));
borderPane.setPadding(new Insets(10));
return borderPane;
}
private Pane createGridPaneExample() {
GridPane grid = new GridPane();
grid.setPadding(new Insets(10));
grid.setHgap(10);
grid.setVgap(10);
grid.add(new Label("Name:"), 0, 0);
grid.add(new TextField(), 1, 0);
grid.add(new Label("Email:"), 0, 1);
grid.add(new TextField(), 1, 1);
return grid;
}
private Pane createFlowPaneExample() {
FlowPane flow = new FlowPane(10, 10);
flow.setPadding(new Insets(10));
for (int i = 1; i <= 8; i++) {
flow.getChildren().add(new Button("Button " + i));
}
return flow;
}
private Pane createTilePaneExample() {
TilePane tile = new TilePane(10, 10);
tile.setPadding(new Insets(10));
tile.setPrefColumns(4);
for (int i = 1; i <= 8; i++) {
tile.getChildren().add(new Label("Tile " + i));
}
return tile;
}
private Pane createAnchorPaneExample() {
AnchorPane anchor = new AnchorPane();
Button button = new Button("Anchored Button");
anchor.getChildren().add(button);
AnchorPane.setTopAnchor(button, 20.0);
AnchorPane.setLeftAnchor(button, 30.0);
return anchor;
}
private Pane createScrollPaneExample() {
VBox longVBox = new VBox(10);
for (int i = 1; i <= 50; i++) {
longVBox.getChildren().add(new Label("Line " + i));
}
ScrollPane scrollPane = new ScrollPane(longVBox);
scrollPane.setFitToWidth(true);
return new VBox(scrollPane);
}
public static void main(String[] args) {
launch(args);
}
}
