JavaFX布局-GridPane

• 使用行和列来组织其子节点
• 将节点放置在二维网格中的任何单元格，同时也可以设置跨越行、跨越列

常用实行

alignment

对齐方式，设置内容居中，顶部居中等

gridPane.setAlignment(Pos.TOP_CENTER);
public enum Pos {
   /**
    * Represents positioning on the top vertically and on the left horizontally.
    */
   TOP_LEFT(TOP, LEFT),

   /**
    * Represents positioning on the top vertically and on the center horizontally.
    */
   TOP_CENTER(TOP, HPos.CENTER),

   /**
    * Represents positioning on the top vertically and on the right horizontally.
    */
   TOP_RIGHT(TOP, RIGHT),

   /**
    * Represents positioning on the center vertically and on the left horizontally.
    */
   CENTER_LEFT(VPos.CENTER, LEFT),

   /**
    * Represents positioning on the center both vertically and horizontally.
    */
   CENTER(VPos.CENTER, HPos.CENTER),

   /**
    * Represents positioning on the center vertically and on the right horizontally.
    */
   CENTER_RIGHT(VPos.CENTER, RIGHT),

   /**
    * Represents positioning on the bottom vertically and on the left horizontally.
    */
   BOTTOM_LEFT(BOTTOM, LEFT),

   /**
    * Represents positioning on the bottom vertically and on the center horizontally.
    */
   BOTTOM_CENTER(BOTTOM, HPos.CENTER),

   /**
    * Represents positioning on the bottom vertically and on the right horizontally.
    */
   BOTTOM_RIGHT(BOTTOM, RIGHT),

   /**
    * Represents positioning on the baseline vertically and on the left horizontally.
    */
   BASELINE_LEFT(BASELINE, LEFT),

   /**
    * Represents positioning on the baseline vertically and on the center horizontally.
    */
   BASELINE_CENTER(BASELINE, HPos.CENTER),

   /**
    * Represents positioning on the baseline vertically and on the right horizontally.
    */
   BASELINE_RIGHT(BASELINE, RIGHT);
}  

hgap

水平间距

gridPane.setHgap(10);

vgap

垂直间距

gridPane.setVgap(10);

padding

内边距，可以单独设置上、下、左、右的内边距

gridPane.setPadding(new Insets(10, 10, 10, 10));

gridLinesVisible

显示网格线

gridPane.setGridLinesVisible(true);

实现方式

Java实现

    public static GridPane demo1() {
        // 创建gridPane
        GridPane gridPane = new GridPane();
        // 对齐方式
        gridPane.setAlignment(Pos.CENTER);
        // 水平间距
        gridPane.setHgap(3);
        // 垂直间距
        gridPane.setVgap(3);
        // 内边距
        gridPane.setPadding(new Insets(10, 10, 10, 10));
        // 显示网格线
        gridPane.setGridLinesVisible(true);

        // 圆形
        Circle circle = new Circle(100, Color.RED);
        gridPane.add(circle, 0, 0);

        // 矩形
        Rectangle rectangle = new Rectangle(120, 100, Color.BLUE);
        gridPane.add(rectangle, 1, 0);

        // 按钮1
        Button button1 = new Button("Button 1");
        gridPane.add(button1, 0, 1);

        // 按钮1
        Button button2 = new Button("Button 1");
        gridPane.add(button2, 1, 1);

        // 多边形
        Polygon polygon = new Polygon(10, 20, 30, 40, 50, 20);
        polygon.setFill(Color.RED);
        polygon.setStroke(Color.BLACK);
        polygon.setStrokeWidth(2);
        gridPane.add(polygon, 0, 2, 2, 1);

        return gridPane;
    }

fxml实现

<GridPane alignment="CENTER" gridLinesVisible="true" hgap="3" prefHeight="400" prefWidth="600" vgap="3"
          xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets bottom="5" left="5" right="5" top="5"/>
    </padding>
    <columnConstraints>
        <ColumnConstraints percentWidth="50"/>
        <ColumnConstraints percentWidth="50"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="100" prefHeight="30"/>
        <RowConstraints minHeight="100" prefHeight="30"/>
        <RowConstraints minHeight="100" prefHeight="30"/>
    </rowConstraints>
    <children>
        <Circle fill="red" radius="50.0" stroke="BLACK" strokeType="INSIDE" GridPane.columnIndex="0"
                GridPane.rowIndex="0"/>
        <Rectangle fill="blue" height="100" width="120" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
        <Button text="Button 1" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
        <Button text="Button 2" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
        <Polygon fill="red" stroke="BLACK" strokeType="INSIDE" GridPane.columnIndex="0" GridPane.rowIndex="2"
                 GridPane.columnSpan="2">
            <points>
                <Double fx:value="10"/>
                <Double fx:value="20"/>
                <Double fx:value="30"/>
                <Double fx:value="40"/>
                <Double fx:value="50"/>
                <Double fx:value="20"/>
            </points>
        </Polygon>
    </children>
</GridPane>