- 使用行和列来组织其子节点
- 将节点放置在二维网格中的任何单元格,同时也可以设置跨越行、跨越列
常用实行
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>