VBox和HBox的用法及用例

Jks&發表於2024-06-22

JavaFX 中的 VBox 和 HBox 是兩種常用的佈局元件，分別用於垂直和水平佈局。它們繼承自 Pane 類，可以包含多個子節點，並且子節點會按照指定的方向排列。

VBox（垂直框）

VBox 元件按照垂直方向排列子節點，子節點上下排列。

基本用法：

  • 使用 getChildren().add(node) 方法新增子節點。
  • 可以透過 setSpacing(double) 方法設定子節點之間的間距。
  • 使用 setAlignment(Pos) 方法設定子節點的對齊方式，如 Pos.TOP、Pos.CENTER、Pos.BOTTOM。

VBox 用例：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VBoxDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        VBox vbox = new VBox(10); // 間距為10
        vbox.setAlignment(Pos.CENTER); // 居中對齊

        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        Button button3 = new Button("Button 3");

        vbox.getChildren().addAll(button1, button2, button3);

        Scene scene = new Scene(vbox, 200, 300);
        primaryStage.setTitle("VBox Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

HBox（水平框）

HBox 元件按照水平方向排列子節點，子節點左右排列。

基本用法：

  • 與 VBox 類似，使用 getChildren().add(node) 方法新增子節點。
  • 可以透過 setSpacing(double) 方法設定子節點之間的間距。
  • 使用 setAlignment(Pos) 方法設定子節點的對齊方式，如 Pos.LEFT、Pos.CENTER、Pos.RIGHT。

HBox 用例：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class HBoxDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        HBox hbox = new HBox(10); // 間距為10
        hbox.setAlignment(Pos.CENTER); // 居中對齊

        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        Button button3 = new Button("Button 3");

        hbox.getChildren().addAll(button1, button2, button3);

        Scene scene = new Scene(hbox, 300, 200);
        primaryStage.setTitle("HBox Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

在這兩個用例中，我們建立了 VBox 和 HBox 佈局，並新增了三個按鈕作為子節點。透過設定間距和對齊方式，我們能夠控制這些按鈕的佈局和外觀。

VBox 和 HBox 非常適合用來快速建立簡單的線性佈局，它們也可以巢狀使用，以建立更復雜的佈局結構。例如，你可以在一個 VBox 中放置多個 HBox，或者相反，以實現更靈活的佈局設計。

相關文章