JavaFX - 布局面板(容器)



在场景中构建所有必需的节点后,我们通常会按所需顺序排列它们。我们排列组件的容器称为容器的布局。我们也可以说我们遵循了一种布局,因为它有助于将所有组件放置在容器内的特定位置。下图说明了 JavaFX 节点在垂直和水平布局中的位置。

JavaFX Layout Panes

在本教程中,我们将讨论 JavaFX 提供的各种预定义布局,包括HBox、VBox、Border Pane、Stack Pane、Text Flow、Anchor Pane、Title Pane、Grid Pane、Flow Panel等等。上述每个布局都由一个类表示,所有这些类都属于名为javafx.layout的包。名为Pane的类是 JavaFX 中所有布局的基类。

创建布局

要创建布局,我们需要遵循以下步骤:

  • 创建节点。
  • 实例化所需布局的相应类。
  • 设置布局的属性。
  • 将所有创建的节点添加到布局。

创建节点

首先,通过实例化它们各自的类来创建 JavaFX 应用程序所需的节点。例如,如果我们想要在 HBox 布局中使用一个文本字段和两个按钮(分别命名为“播放”和“停止”),我们必须首先创建这些节点,如下面的代码块所示:

//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");

实例化相应类

创建节点(并完成所有操作)后,实例化所需布局的类。例如,如果我们想要创建一个 Hbox 布局,我们需要如下实例化此类:

HBox hbox = new HBox();

设置布局的属性

实例化类后,我们需要使用其各自的 setter 方法来设置布局的属性。例如:如果我们想要在 HBox 布局中设置创建的节点之间的间距,那么我们需要为名为 spacing 的属性设置值。这可以通过使用 setter 方法setSpacing()来完成,如下所示:

hbox.setSpacing(10);

将节点对象添加到布局面板

最后,我们需要将创建的节点对象添加到布局面板,方法是将它们作为参数值传递,如下所示:

//Creating a Group object  
hbox.getChildren().addAll(textField, playButton, stopButton);

JavaFX 中的布局面板

以下是 JavaFX 提供的各种布局面板(类)。这些类存在于包javafx.scene.layout中。

序号 布局和描述
1 HBox

HBox 布局将应用程序中的所有节点排列在单个水平行中。

名为HBox的类(位于包javafx.scene.layout中)表示水平盒布局。

2 VBox

VBox 布局将应用程序中的所有节点排列在单个垂直列中。

名为VBox的类(位于包javafx.scene.layout中)表示垂直盒布局。

3 BorderPane

Border Pane 布局将应用程序中的节点排列在顶部、左侧、右侧、底部和中心位置。

名为BorderPane的类(位于包javafx.scene.layout中)表示边框窗格布局。

4 StackPane

Stack Pane 布局将应用程序中的节点一个接一个地排列,就像堆栈一样。首先添加的节点位于堆栈的底部,下一个节点位于其顶部。

名为StackPane的类(位于包javafx.scene.layout中)表示堆栈窗格布局。

5 TextFlow

Text Flow 布局将多个文本节点排列在一个流中。

名为TextFlow的类(位于包javafx.scene.layout中)表示文本流布局。

6 AnchorPane

Anchor Pane 布局将应用程序中的节点固定在距窗格特定距离的位置。

名为AnchorPane的类(位于包javafx.scene.layout中)表示 Anchor Pane 布局。

7 TilePane

Tile Pane 布局以统一大小的图块形式添加应用程序的所有节点。

名为TilePane的类(位于包javafx.scene.layout中)表示 TilePane 布局。

8 GridPane

Grid Pane 布局将应用程序中的节点排列成行和列的网格。在使用 JavaFX 创建表单时,此布局非常方便。

名为GridPane的类(位于包javafx.scene.layout中)表示 GridPane 布局。

9 FlowPane

Flow Pane 布局以流的形式包装所有节点。水平 Flow Pane 在其高度处包装窗格的元素,而垂直 Flow Pane 在其宽度处包装元素。

名为FlowPane的类(位于包javafx.scene.layout中)表示 Flow Pane 布局。

广告