如何用BorderPane实现3×3按钮网格并填满舞台空间

问题说明 #

无法让BorderPane完全填满舞台空间，且要求不能替换为GridPane。需实现以下目标：

• 9个按钮完全填充BorderPane，所有按钮大小一致
• 按钮与BorderPane随窗口大小自适应变化
• 消除当前布局存在的空隙

已尝试更换布局容器、添加颜色辅助查看、设置按钮和容器的prefWidth/maxWidth/minWidth为Double.MAX_VALUE，均未解决问题。

效果对比 #

期望效果 #

实际效果 #

解决方案 #

从布局容器约束和按钮尺寸设置两方面调整，即可实现需求：

1. 配置子容器的拉伸规则 #

BorderPane的top/left/right/bottom区域默认不会自动拉伸，需给这些区域的子容器设置：

• 给HBox内的按钮添加Hgrow=Priority.ALWAYS，VBox内的按钮添加Vgrow=Priority.ALWAYS，让按钮均匀分配容器空间
• 设置按钮的maxWidth/maxHeight为Double.MAX_VALUE，允许按钮填满所在容器

2. 简化中间区域布局 #

将原代码中包裹中间按钮的HBox移除，让按钮直接作为BorderPane的Center节点，减少嵌套层级，提升自适应效率

3. 消除默认间距 #

给所有HBox/VBox设置spacing=0，避免默认间距导致的空隙

修改后的完整代码 #

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class MagicSquares extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        // 顶部行按钮
        Button tLButton = new Button("1");
        Button tCButton = new Button("2");
        Button tRButton = new Button("3");
        HBox topRow = new HBox(0, tLButton, tCButton, tRButton);
        topRow.getStyleClass().add("a");
        HBox.setHgrow(tLButton, Priority.ALWAYS);
        HBox.setHgrow(tCButton, Priority.ALWAYS);
        HBox.setHgrow(tRButton, Priority.ALWAYS);
        setButtonMaxSize(tLButton, tCButton, tRButton);

        // 左侧中间按钮
        Button mLButton = new Button("4");
        VBox middleLeft = new VBox(0, mLButton);
        middleLeft.getStyleClass().add("b");
        VBox.setVgrow(mLButton, Priority.ALWAYS);
        setButtonMaxSize(mLButton);

        // 中间按钮（直接作为Center节点）
        Button mCButton = new Button("5");
        setButtonMaxSize(mCButton);

        // 右侧中间按钮
        Button mRButton = new Button("6");
        VBox middleRight = new VBox(0, mRButton);
        middleRight.getStyleClass().add("c");
        VBox.setVgrow(mRButton, Priority.ALWAYS);
        setButtonMaxSize(mRButton);

        // 底部行按钮
        Button bLButton = new Button("7");
        Button bCButton = new Button("8");
        Button bRButton = new Button("9");
        HBox bottomRow = new HBox(0, bLButton, bCButton, bRButton);
        bottomRow.getStyleClass().add("d");
        HBox.setHgrow(bLButton, Priority.ALWAYS);
        HBox.setHgrow(bCButton, Priority.ALWAYS);
        HBox.setHgrow(bRButton, Priority.ALWAYS);
        setButtonMaxSize(bLButton, bCButton, bRButton);

        // 配置BorderPane
        BorderPane bPane = new BorderPane();
        bPane.setTop(topRow);
        bPane.setLeft(middleLeft);
        bPane.setCenter(mCButton);
        bPane.setRight(middleRight);
        bPane.setBottom(bottomRow);

        // 绑定BorderPane尺寸到舞台，确保填满空间
        bPane.prefWidthProperty().bind(primaryStage.widthProperty());
        bPane.prefHeightProperty().bind(primaryStage.heightProperty());

        Scene scene = new Scene(bPane);
        scene.getStylesheets().add("styles.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // 批量设置按钮最大尺寸，允许填充容器
    private void setButtonMaxSize(Button... buttons) {
        for (Button btn : buttons) {
            btn.setMaxWidth(Double.MAX_VALUE);
            btn.setMaxHeight(Double.MAX_VALUE);
        }
    }
}

补充说明 #

• 新增setButtonMaxSize工具方法，简化批量设置按钮尺寸的代码
• 绑定BorderPane的宽高到舞台属性，确保BorderPane始终填满舞台
• 所有布局容器的间距设为0，彻底消除空隙

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