JavaFX GridPane中如何分离文本框与按钮的间距格式？

在JavaFX复刻计算器界面（仅实现外观）时，已设置按钮的水平、垂直间距为16，但添加用于显示数字/结果的TextField后，按钮布局受文本框尺寸影响，导致文本框所在行下方的第一行按钮出现过大间距。

当前代码片段 #

// 布局管理器：管理窗口内容
GridPane root = new GridPane();

// 场景：包含窗口内容
// 参数：布局管理器；窗口宽度；窗口高度
Scene mainScene = new Scene(root, 600, 600);
// 将场景挂载到舞台（窗口）并显示
mainStage.setScene(mainScene);

// 创建文本框
TextField nameField = new TextField("");
root.add(nameField, 3, 1);

root.setStyle("-fx-font-size: 24;");

// 设置行列间距
root.setHgap(16); // 水平间距
root.setVgap(16); // 垂直间距

// 创建所有按钮
Button button0 = new Button("0");
Button button1 = new Button("1");
Button button2 = new Button("2");
Button button3 = new Button("3");
Button button4 = new Button("4");
...

// 参数：控件；列号（X）；行号（Y）
// 第一行按钮
root.add(buttonAllClear, 3, 2);
root.add(buttonClear, 4, 2);
root.add(buttonDelete, 5, 2);
root.add(buttonDivides, 6, 2);

// 第二行按钮
root.add(button7, 3, 3);
root.add(button8, 4, 3);
root.add(button9, 5, 3);
root.add(buttonTimes, 6, 3);

当前界面效果 #

[ 文本框 ]
ac c del /
7 8 9 *
4 5 6 -
1 2 3 +
0 . =

期望界面效果 #

[ 文本框 ]
ac c del /
7 8 9 *
4 5 6 -
1 2 3 +
0 . =

问题根源是TextField仅占据了GridPane的第3列，导致该列被文本框拉宽，进而使得位于该列的按钮（如ac、7、4等）宽度异常。只需让文本框跨列占据所有按钮所在的列，即可让GridPane均匀分配列宽，恢复按钮的正常布局。

步骤1：修改文本框的跨列设置 #

调整文本框的添加代码，使用GridPane.setColumnSpan方法让它跨4列（对应按钮所在的3-6列）：

// 创建文本框
TextField nameField = new TextField("");
root.add(nameField, 3, 1);
// 设置文本框跨4列，覆盖按钮所在的所有列
GridPane.setColumnSpan(nameField, 4);

步骤2：可选统一按钮最小宽度 #

为避免按钮因内容长度差异导致宽度不一致，可给所有按钮设置统一的最小宽度：

// 创建按钮时统一设置最小宽度
Button buttonAllClear = new Button("ac");
buttonAllClear.setMinWidth(80);
// 其他按钮同理设置该属性

调整后，GridPane会均匀分配各列宽度，按钮间的间距将保持设置的16，达到期望的布局效果。

内容的提问来源于stack exchange，提问作者Sheila