JavaFX GridPane是一个布局组件，将其子组件布置在网格中。网格中单元格的大小取决于GridPane中显示的组件，但是有一些规则。同一行中的所有单元格将具有相同的高度，同一列中的所有单元格将具有相同的宽度。不同的行可以具有不同的高度，不同的列可以具有不同的宽度。

JavaFX GridPane与TilePane的不同之处在于，" GridPane"允许不同大小的单元格，而" TilePane"则使所有瓦片大小相同。

GridPane中的行数和列数取决于所添加的组件。当我们向GridPane中添加组件时，我们会告诉该组件应插入哪个单元格(行，列)，以及该组件应跨越多少行和多少列。

JavaFX GridPane布局组件由类javafx.scene.layout.GridPane表示。

创建一个GridPane

通过其构造函数创建一个JavaFXGridPane。这是一个JavaFXGridPane实例化示例：

GridPane gridPane = new GridPane();

将儿童添加到GridPane

我们可以通过多种方式将子级添加到JavaFXGridPane中。最简单的方法是使用" GridPane"的" add()"。这是向GridPane添加6个按钮的示例：

Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
Button button4 = new Button("Button 4");
Button button5 = new Button("Button 5");
Button button6 = new Button("Button 6");

GridPane gridPane = new GridPane();

gridPane.add(button1, 0, 0, 1, 1);
gridPane.add(button2, 1, 0, 1, 1);
gridPane.add(button3, 2, 0, 1, 1);
gridPane.add(button4, 0, 1, 1, 1);
gridPane.add(button5, 1, 1, 1, 1);
gridPane.add(button6, 2, 1, 1, 1);

add()方法的第一个参数是要添加到GridPane中的组件(节点)。

add()方法的第二个和第三个参数是应其中显示组件的单元格的列索引和行索引。列和行索引从0开始。

add()方法的第四个和第五个参数是组件的跨度和行跨度，即组件应扩展到多少行和多少列。列跨度和行跨度的工作原理与HTML表中的" colspan"和" rowspan"类似。

将GridPane添加到场景图

要使JavaFXGridPane可见，必须将其添加到JavaFX场景图。为此，我们必须将GridPane实例添加到Scene对象，或者将GridPane添加到添加到Scene对象的布局组件中。

这是向场景图添加JavaFXGridPane的示例：

package com.Hyman.javafx.layouts;

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

public class GridPaneExperiments extends Application  {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("GridPane Experiment");

        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        Button button3 = new Button("Button 3");
        Button button4 = new Button("Button 4");
        Button button5 = new Button("Button 5");
        Button button6 = new Button("Button 6");

        GridPane gridPane = new GridPane();

        gridPane.add(button1, 0, 0, 1, 1);
        gridPane.add(button2, 1, 0, 1, 1);
        gridPane.add(button3, 2, 0, 1, 1);
        gridPane.add(button4, 0, 1, 1, 1);
        gridPane.add(button5, 1, 1, 1, 1);
        gridPane.add(button6, 2, 1, 1, 1);

        Scene scene = new Scene(gridPane, 240, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

该应用程序产生的应用程序如下图所示。

跨越多行和多列

要查看如何使一个组件跨越多个列和行，请查看对添加到GridPane中的6个按钮的修改：

gridPane.add(button1, 0, 0, 2, 2);

gridPane.add(button2, 2, 0, 1, 1);
gridPane.add(button3, 2, 1, 1, 1);
gridPane.add(button4, 0, 2, 1, 1);
gridPane.add(button5, 1, 2, 1, 1);
gridPane.add(button6, 2, 2, 1, 1);

请注意，第一个添加的按钮的列跨度和行跨度为2. 请注意，其余按钮是如何添加到左上方2 x 2列之外的。这些设置产生的布局如下所示：

水平和垂直间距

我们可以使用JavaFX GridPane内部的setHGap()和setVGap()方法设置组件之间的水平和垂直间距。这是一个示例，展示了如何设置GridPane中组件之间的水平和垂直间距：

gridPane.setHgap(10);
gridPane.setVgap(10);

当添加到前面的示例中时，生成的应用程序将如下所示：

注意按钮之间的水平和垂直间隙。如果在" GridPane"上没有设置间隙，则按钮将被并排放置。