GridPane網格佈局

Jks&發表於2024-06-22

JavaFX 的 GridPane 是一種基於網格的佈局方式，它允許你將子節點放置在網格的行和列中。GridPane 提供了高度的靈活性來建立複雜的使用者介面佈局。

以下是 GridPane 的一些基本用法：

  1. 新增節點到網格：使用 add 方法將子節點新增到特定的行和列。

  2. 行和列的索引：行和列的索引都是從0開始的。

  3. 列寬和行高：可以透過 setColumnWidth 和 setRowVvalue 方法來設定列寬和行高。

  4. 對齊方式：可以為每個子節點設定水平和垂直對齊方式。

  5. 填充和邊距：可以為 GridPane 設定填充和邊距，以控制子節點之間的空間。

  6. 網格線：可以透過 setGridLinesVisible 方法來顯示或隱藏網格線。

  7. 權重：可以為列和行設定權重（setColumnFillWidth 和 setRowFillHeight），以控制它們在可用空間中的佔比。

下面是一個 GridPane 的使用案例，演示瞭如何使用 GridPane 來建立一個簡單的表單介面：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPaneDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 建立 GridPane 例項
        GridPane gridPane = new GridPane();

        // 設定網格線可見
        gridPane.setGridLinesVisible(true);

        // 設定填充和邊距
        gridPane.setPadding(new Insets(10, 10, 10, 10));
        gridPane.setHgap(5);
        gridPane.setVgap(5);

        // 建立標籤和按鈕，並將它們新增到 GridPane
        gridPane.add(new Label("First Name:"), 0, 0);
        gridPane.add(new Button("First Name Button"), 1, 0);
        gridPane.add(new Label("Last Name:"), 0, 1);
        gridPane.add(new Button("Last Name Button"), 1, 1);
        gridPane.add(new Label("Email:"), 0, 2);
        gridPane.add(new Button("Email Button"), 1, 2);

        // 建立場景並設定 GridPane
        Scene scene = new Scene(gridPane, 300, 200);

        // 設定舞臺並顯示
        primaryStage.setScene(scene);
        primaryStage.setTitle("GridPane Demo");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

在這個例子中，我們建立了一個 GridPane，併為它設定了網格線可見、填充和邊距。然後，我們建立了幾個 Label 和 Button 物件，並將它們新增到 GridPane 的特定行和列中。每個標籤和按鈕都位於一個單元格內，標籤位於第一列，按鈕位於第二列。

執行這個程式，你會看到一個視窗，其中包含一個簡單的表單佈局，標籤和按鈕被組織在一個3行2列的網格中。透過調整視窗的大小，你可以觀察到 GridPane 如何自動調整子節點的大小以適應可用空間。

相關文章