如何消除GridPane中因节点尺寸差异导致的列间隙？

问题原因 #

GridPane的列宽由该列内最宽的元素决定。你把Clear按钮放在第0列（和7、4、1同列），Clear的宽度比数字按钮宽，导致第0列被拉宽；而第1列的元素（8、5、2、0）都是窄的数字按钮，列宽较窄，最终两列之间出现明显间隙。

解决方案：分离数字键盘与底部按钮布局 #

用VBox作为主容器，上方放置只包含数字按钮的GridPane，下方用HBox承载Clear、0、Start按钮。这样底部按钮的宽度不会影响数字键盘的列宽，同时能实现0按钮居中、Clear/Start向两侧延伸的效果。

修改后的完整代码：

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class ReproducibleGap extends Application {
    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(new ButtonGrid(), 300, 400);
        
        primaryStage.setTitle("Numpad");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

class ButtonGrid extends VBox {

    protected Button[] numpad = new Button[10];
    protected Button clear;
    protected Button start;

    ButtonGrid() {
        Font buttonFont = new Font(18);
        for (int i = 0; i < numpad.length; i++) {
            numpad[i] = new Button(String.valueOf(i));
            numpad[i].setFont(buttonFont);
        }

        // 数字键盘区域（1-9）
        GridPane numGrid = new GridPane();
        numGrid.setAlignment(Pos.CENTER);
        numGrid.setPadding(new Insets(50, 0, 20, 0));
        numGrid.setHgap(10); // 列间距
        numGrid.setVgap(10); // 行间距

        // 统一数字按钮宽度，避免列宽不一致
        double numBtnWidth = 60;
        for (Button btn : numpad) {
            if (!btn.getText().equals("0")) {
                btn.setPrefWidth(numBtnWidth);
            }
        }

        // 添加1-9按钮到GridPane
        for (int i = 0; i < 3; i++) {
            numGrid.addRow(i, numpad[i * 3 + 1], numpad[i * 3 + 2], numpad[i * 3 + 3]);
        }

        // 底部按钮区域
        HBox bottomBox = new HBox(10);
        bottomBox.setAlignment(Pos.CENTER);
        bottomBox.setFillWidth(true); // 让HBox充满可用宽度

        clear = new Button("Clear");
        clear.setFont(buttonFont);
        clear.setMaxWidth(Double.MAX_VALUE);
        HBox.setHgrow(clear, Priority.ALWAYS); // 允许Clear填充左侧空间
        clear.setAlignment(Pos.CENTER);

        start = new Button("Start");
        start.setFont(buttonFont);
        start.setMaxWidth(Double.MAX_VALUE);
        HBox.setHgrow(start, Priority.ALWAYS); // 允许Start填充右侧空间
        start.setAlignment(Pos.CENTER);

        // 0按钮保持和数字按钮一致宽度
        numpad[0].setPrefWidth(numBtnWidth);

        bottomBox.getChildren().addAll(clear, numpad[0], start);

        // 组装主容器
        this.getChildren().addAll(numGrid, bottomBox);
        this.setAlignment(Pos.CENTER);
        this.setPadding(new Insets(20));
        this.setSpacing(10);
    }
}

关键调整说明 #

1. 分离布局：用VBox拆分数字键盘和底部按钮，避免底部宽按钮影响数字列的宽度
2. 统一数字按钮宽度：给1-9和0按钮设置固定宽度，保证数字键盘的列对齐整齐
3. HBox自适应填充：通过setFillWidth(true)和HBox.setHgrow让Clear和Start自动填充左右剩余空间，0按钮自然居中

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