布局类的介绍

在JavaFX中，布局类用于管理和组织用户界面上的控件和容器。JavaFX提供了一系列布局类，每个类都有不同的排列方式和特性，以适应各种布局需求。以下是一些常用的JavaFX布局类及其主要特性：

布局类的特性

Pane类：

特性： Pane是所有布局类的基类，它允许自由排列子节点，没有特定的布局规则。可以通过设置子节点的坐标来定位它们。Pane的子类包括AnchorPane、BorderPane等。

FlowPane类：

特性： FlowPane按照水平或垂直流动的方式排列子节点。可以通过设置水平和垂直间距来调整子节点之间的间隔。适用于自适应大小的控件。

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.FlowPane;import javafx.stage.Stage;public class FlowPaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建FlowPane布局        FlowPane flowPane = new FlowPane();        flowPane.setHgap(10); // 设置水平间距        flowPane.setVgap(10); // 设置垂直间距        // 向FlowPane中添加按钮        for (int i = 1; i <= 10; i++) {            Button button = new Button("Button " + i);            flowPane.getChildren().add(button);        }        // 创建场景        Scene scene = new Scene(flowPane, 300, 200);        // 设置舞台        primaryStage.setTitle("FlowPane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

FlowPane类01

FlowPane类02

FlowPane类03

在这个示例中，通过创建FlowPane布局，并设置水平和垂直的间距，然后向FlowPane中添加了10个按钮。这些按钮会按照水平方向流动排列，当空间不足时会自动换行。

通过调用setHgap和setVgap方法，可以调整按钮之间的水平和垂直间距。FlowPane的弹性布局使得它适用于需要自适应大小、自动换行的场景，例如标签、按钮等。

HBox类：

特性： 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 HBoxExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建HBox布局        HBox hbox = new HBox(10); // 设置水平间距为10        // 向HBox中添加按钮        for (int i = 1; i <= 5; i++) {            Button button = new Button("Button " + i);            hbox.getChildren().add(button);        }        // 创建场景        Scene scene = new Scene(hbox, 300, 200);        // 设置舞台        primaryStage.setTitle("HBox Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

HBox类

在这个示例中，通过创建HBox布局，设置水平方向上的按钮之间的间距为10，然后向HBox中添加了5个按钮。这些按钮会按照水平方向排列，间距为10。

通过调用HBox的构造函数，可以设置水平方向上子节点的默认间距。通过getChildren().add(...)方法，可以向HBox中添加子节点，这些子节点将会按照水平方向排列。 HBox布局是一个简单而常用的布局，适用于需要水平排列控件的场景，如工具栏、按钮等。

VBox类：

特性： 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 VBoxExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建VBox布局        VBox vbox = new VBox(10); // 设置垂直间距为10        // 向VBox中添加按钮        for (int i = 1; i <= 5; i++) {            Button button = new Button("Button " + i);            vbox.getChildren().add(button);        }        // 创建场景        Scene scene = new Scene(vbox, 200, 300);        // 设置舞台        primaryStage.setTitle("VBox Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

VBox类

在这个示例中，通过创建VBox布局，设置垂直方向上的按钮之间的间距为10，然后向VBox中添加了5个按钮。这些按钮会按照垂直方向排列，间距为10。

通过调用VBox的构造函数，可以设置垂直方向上子节点的默认间距。通过getChildren().add(...)方法，可以向VBox中添加子节点，这些子节点将会按照垂直方向排列。 VBox布局是一个简单而常用的布局，适用于需要垂直排列控件的场景，如侧边栏、列表等。

BorderPane类：

特性： BorderPane将界面划分为上、下、左、右和中五个区域，每个区域可以放置不同的控件。通常用于构建包含顶部菜单栏、底部状态栏等的界面。

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.BorderPane;import javafx.stage.Stage;public class BorderPaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建BorderPane布局        BorderPane borderPane = new BorderPane();        // 向BorderPane的各个区域添加按钮        Button topButton = new Button("Top");        BorderPane.setMargin(topButton, new javafx.geometry.Insets(10, 0, 0, 0)); // 设置上边距        borderPane.setTop(topButton);        Button bottomButton = new Button("Bottom");        BorderPane.setMargin(bottomButton, new javafx.geometry.Insets(0, 0, 10, 0)); // 设置下边距        borderPane.setBottom(bottomButton);        Button leftButton = new Button("Left");        BorderPane.setMargin(leftButton, new javafx.geometry.Insets(0, 10, 0, 0)); // 设置左边距        borderPane.setLeft(leftButton);        Button rightButton = new Button("Right");        BorderPane.setMargin(rightButton, new javafx.geometry.Insets(0, 0, 0, 10)); // 设置右边距        borderPane.setRight(rightButton);        Button centerButton = new Button("Center");        borderPane.setCenter(centerButton);        // 创建场景        Scene scene = new Scene(borderPane, 300, 200);        // 设置舞台        primaryStage.setTitle("BorderPane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

BorderPane类

在这个示例中，通过创建BorderPane布局，然后分别向其顶部、底部、左侧、右侧和中心区域添加按钮。使用BorderPane.setMargin(...)方法设置各个按钮的边距，以增加布局的美观性。

BorderPane布局是一种常用的布局，适用于需要将界面划分为上、下、左、右和中心五个区域的场景，如主窗口布局、应用程序框架等。

GridPane类：

特性： GridPane将界面划分为网格，每个网格可以放置一个子节点。通过设置行和列的约束，可以实现复杂的布局。适用于表格状的界面。

import javafx.application.Application;import javafx.geometry.Insets;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.GridPane;import javafx.stage.Stage;public class GridPaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建GridPane布局        GridPane gridPane = new GridPane();        gridPane.setHgap(10); // 设置水平间距        gridPane.setVgap(10); // 设置垂直间距        gridPane.setPadding(new Insets(10)); // 设置内边距        // 向GridPane中添加按钮        for (int i = 0; i < 3; i++) {            for (int j = 0; j < 3; j++) {                Button button = new Button("Button " + (i * 3 + j + 1));                GridPane.setRowIndex(button, i); // 设置按钮的行索引                GridPane.setColumnIndex(button, j); // 设置按钮的列索引                gridPane.getChildren().add(button);            }        }        // 创建场景        Scene scene = new Scene(gridPane, 300, 200);        // 设置舞台        primaryStage.setTitle("GridPane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

GridPane类

在这个示例中，通过创建GridPane布局，并设置水平和垂直方向上的间距，以及内边距。然后使用两个嵌套的循环向GridPane中添加9个按钮，这些按钮将会按照3x3的网格布局排列。

通过GridPane.setRowIndex(...)和GridPane.setColumnIndex(...)方法，可以设置每个按钮在网格中的行和列索引。GridPane布局是一种适用于表格状界面的布局方式，非常灵活且可用于各种复杂布局需求。

StackPane类：

特性： StackPane按照堆栈的方式排列子节点，最后添加的子节点会显示在最顶层。适用于需要层叠效果的界面。

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.StackPane;import javafx.stage.Stage;public class StackPaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建StackPane布局        StackPane stackPane = new StackPane();        // 向StackPane中添加按钮        Button button1 = new Button("Button 1");        Button button2 = new Button("Button 2");        Button button3 = new Button("Button 3");        stackPane.getChildren().addAll(button1, button2, button3);        // 创建场景        Scene scene = new Scene(stackPane, 300, 200);        // 设置舞台        primaryStage.setTitle("StackPane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

StackPane类

在这个示例中，通过创建StackPane布局，并向其中添加了三个按钮。这些按钮将按照堆栈的方式排列，最后添加的按钮会显示在最顶层。

StackPane布局是一种简单而常用的布局方式，适用于需要将多个控件层叠在一起的场景，例如用于创建按钮组、图层叠加等。

TilePane类：

特性： TilePane将子节点按照平铺的方式排列，可以设置水平和垂直间距。适用于需要规律排列的控件。

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.TilePane;import javafx.stage.Stage;public class TilePaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建TilePane布局        TilePane tilePane = new TilePane();        tilePane.setHgap(10); // 设置水平间距        tilePane.setVgap(10); // 设置垂直间距        // 向TilePane中添加按钮        for (int i = 1; i <= 9; i++) {            Button button = new Button("Button " + i);            tilePane.getChildren().add(button);        }        // 创建场景        Scene scene = new Scene(tilePane, 300, 200);        // 设置舞台        primaryStage.setTitle("TilePane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

TilePane类01

TilePane类02

在这个示例中，通过创建TilePane布局，并设置水平和垂直方向上的间距，然后向TilePane中添加了9个按钮。这些按钮将按照平铺的方式排列，当空间不足时会自动换行。

TilePane布局是一种常用的布局方式，适用于需要规律排列的场景，例如展示图标、缩略图等。

AnchorPane类：

特性： AnchorPane通过将子节点锚定到容器的边界或其他节点上，实现相对布局。适用于需要相对定位的场景。

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.AnchorPane;import javafx.stage.Stage;public class AnchorPaneExample extends Application {    @Override    public void start(Stage primaryStage) {        // 创建AnchorPane布局        AnchorPane anchorPane = new AnchorPane();        // 向AnchorPane中添加按钮        Button button = new Button("Click me!");        AnchorPane.setTopAnchor(button, 10.0); // 设置按钮距离上边界的距离        AnchorPane.setLeftAnchor(button, 20.0); // 设置按钮距离左边界的距离        AnchorPane.setBottomAnchor(button, 10.0); // 设置按钮距离下边界的距离        AnchorPane.setRightAnchor(button, 20.0); // 设置按钮距离右边界的距离        anchorPane.getChildren().add(button);        // 创建场景        Scene scene = new Scene(anchorPane, 300, 200);        // 设置舞台        primaryStage.setTitle("AnchorPane Example");        primaryStage.setScene(scene);        primaryStage.show();    }    public static void main(String[] args) {        launch(args);    }}

AnchorPane类

在这个示例中，通过创建AnchorPane布局，并向其中添加一个按钮。使用AnchorPane.setTopAnchor(...), AnchorPane.setLeftAnchor(...), AnchorPane.setBottomAnchor(...), 和 AnchorPane.setRightAnchor(...) 方法，可以设置按钮相对于AnchorPane边界的位置。

AnchorPane布局是一种适用于需要相对定位的场景，通过设置子节点相对于父容器的边界的距离，实现对子节点位置的精确控制。

以上就是我们经常用到的布局类，后续使用的时候会详细说明。