Javafx 简明教程

JavaFX - GridPane Layout

GridPane Layout in JavaFX

GridPane 是一种布局容器类型，其中以形成行和列的网格方式排列所有节点。在创建窗体、图表、媒体库等时，此布局派上用场。

The GridPane is a type of layout container in which all the nodes are arranged in such a way that they form a grid of rows and columns. This layout comes handy while creating forms, charts, media galleries and so on.

在 JavaFX 中，包 javafx.scene.layout 的名为 GridPane 的类表示 GridPane 布局。使用其默认构造函数实例化此类将在我们的 JavaFX 应用程序中创建一个网格窗格布局。该类提供以下属性 −

In JavaFX, the class named GridPane of the package javafx.scene.layout represents the GridPane layout. Instantiating this class using its default constructor will create a grid pane layout in our JavaFX application. This class provides the following properties −

  1. alignment − This property represents the alignment of the pane and you can set value of this property using the setAlignment() method.

  2. hgap − This property is of the type double and it represents the horizontal gap between columns.

  3. vgap − This property is of the type double and it represents the vertical gap between rows.

  4. gridLinesVisible − This property is of Boolean type. On true, the lines of the pane are set to be visible.

下表说明了 JavaFX 网格窗格中的单元格位置。每个单元格的第一值表示行，第二值表示列。

Following table illustrates the cell positions in the grid pane of JavaFX. The first value of each cell represents row and second one column.

(0, 0)

(1, 0)

(2, 0)

(0, 1)

(1, 1)

(2, 1)

(0, 2)

(1, 2)

(2, 2)

Example

以下程序是网格窗格布局的一个示例。在此，我们使用网格窗格创建一个窗体。将以下代码保存在名为 GridPaneExample.java 的文件中。

The following program is an example of the grid pane layout. In this, we are creating a form using a Grid Pane. Save this code in a file with the name GridPaneExample.java.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class GridPaneExample extends Application {
   @Override
   public void start(Stage stage) {
      //creating label email
      Text text1 = new Text("Email");

      //creating label password
      Text text2 = new Text("Password");

      //Creating Text Filed for email
      TextField textField1 = new TextField();

      //Creating Text Filed for password
      TextField textField2 = new TextField();

      //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

      //Creating a Grid Pane
      GridPane gridPane = new GridPane();

      //Setting size for the pane
      gridPane.setMinSize(400, 200);

      //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

      //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

      //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

      //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

      //Creating a scene object
      Scene scene = new Scene(gridPane, 400, 300);

      //Setting title to the Stage
      stage.setTitle("Grid Pane Example in JavaFX");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

要从命令提示符编译并执行已保存的 java 文件，请使用以下命令 −

To compile and execute the saved java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls GridPaneExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls GridPaneExample

执行时，上述程序将生成一个 JavaFX 窗口，显示一个使用 GridPane 布局构建的表单。

On executing, the above program will generate a JavaFX window displaying a form built using GridPane layout.

gridpane output