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 佈局。

廣告