JavaFX0网格布局窗格GridPane(JavaFX 0 GridPane网格布局详解与应用)

原创

ithorizon 6个月前 (10-21) 阅读数 41 #后端开发

JavaFX 0 GridPane 网格布局详解与应用

一、简介

JavaFX 是一种用于构建富客户端应用程序的框架，GridPane 是 JavaFX 中的一种布局窗格，它允许用户以网格的形式排列节点。GridPane 提供了灵活的布局管理，允许节点可以跨多个行和列进行排列，而且可以很容易地调整行和列的大小。

二、GridPane 的基本用法

下面我们来了解一下 GridPane 的基本用法。

1. 创建 GridPane 实例

首先，我们需要创建一个 GridPane 实例。


GridPane gridPane = new GridPane();

2. 添加节点到 GridPane

然后，我们可以将节点添加到 GridPane 中，并指定它们在网格中的位置。


Button button1 = new Button("Button 1");
GridPane.setConstraints(button1, 0, 0); // 设置节点位置（列，行）
gridPane.getChildren().add(button1);
Button button2 = new Button("Button 2");
GridPane.setConstraints(button2, 1, 0);
gridPane.getChildren().add(button2);
Label label = new Label("Label");
GridPane.setConstraints(label, 0, 1);
gridPane.getChildren().add(label);

3. 设置行和列的属性

我们可以设置行和列的属性，如最小、最大和首选大小。


GridPane.setMinWidth(gridPane, 200); // 设置 GridPane 的最小宽度
GridPane.setMinHeight(gridPane, 200); // 设置 GridPane 的最小高度
ColumnConstraints col1 = new ColumnConstraints();
col1.setMinWidth(100);
col1.setMaxWidth(200);
gridPane.getColumnConstraints().add(col1);
RowConstraints row1 = new RowConstraints();
row1.setMinHeight(50);
row1.setMaxHeight(100);
gridPane.getRowConstraints().add(row1);

三、GridPane 的进阶用法

接下来，我们来了解一下 GridPane 的一些进阶用法。

1. 跨越多个行和列

我们可以让一个节点跨越多个行和列。


Button button3 = new Button("Button 3");
GridPane.setConstraints(button3, 0, 2, 2, 1); // 设置节点跨越两个列，一个行
gridPane.getChildren().add(button3);

2. 设置对齐方案

我们可以设置节点的对齐方案。


GridPane.setHalignment(button1, HPos.CENTER); // 设置水平对齐方案
GridPane.setValignment(button1, VPos.CENTER); // 设置垂直对齐方案

3. 设置间距

我们可以设置行和列之间的间距。


gridPane.setHgap(10); // 设置列间距
gridPane.setVgap(10); // 设置行间距

四、GridPane 应用示例

下面我们来看一个明了的 GridPane 应用示例，实现一个明了的计算器界面。


import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;
public class Calculator extends Application {
    @Override
    public void start(Stage primaryStage) {
        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(10));
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        // 创建文本框
        TextField textField = new TextField();
        GridPane.setConstraints(textField, 0, 0, 4, 1);
        gridPane.getChildren().add(textField);
        // 创建按钮
        String[] buttonLabels = {"7", "8", "9", "+", "4", "5", "6", "-", "1", "2", "3", "*", "0", ".", "=", "/"};
        for (int i = 0; i < buttonLabels.length; i++) {
            Button button = new Button(buttonLabels[i]);
            int col = i % 4;
            int row = i / 4 + 1;
            GridPane.setConstraints(button, col, row);
            gridPane.getChildren().add(button);
        }
        // 设置列宽
        for (int i = 0; i < 4; i++) {
            ColumnConstraints colConstraints = new ColumnConstraints();
            colConstraints.setMinWidth(50);
            colConstraints.setMaxWidth(50);
            gridPane.getColumnConstraints().add(colConstraints);
        }
        // 设置行高
        for (int i = 0; i < 5; i++) {
            RowConstraints rowConstraints = new RowConstraints();
            rowConstraints.setMinHeight(50);
            rowConstraints.setMaxHeight(50);
            gridPane.getRowConstraints().add(rowConstraints);
        }
        Scene scene = new Scene(gridPane, 200, 250);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Calculator");
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}