JavaFX GridPane内ImageView网格显示异常问题求助

我正在开发一款类似记忆翻牌的JavaFX程序，点击ImageView时会加载新图片。程序启动时，GridPane网格明显超出屏幕范围；随着点击图片次数增多，网格会逐渐收缩至正常尺寸。

核心代码 #

createGrid() 函数 #

private void createGrid() {
        grid = new GridPane();
        grid.setHgap(gap);
        grid.setVgap(gap);

        for (int i = 0; i < 4; i++) {
            ColumnConstraints col = new ColumnConstraints();
            grid.getColumnConstraints().add(col);
        }

        int fixedHeaderHeight = 80;
        RowConstraints headerRow = new RowConstraints();
        headerRow.setPrefHeight(fixedHeaderHeight);
        headerRow.setMinHeight(fixedHeaderHeight);
        headerRow.setMaxHeight(fixedHeaderHeight);
        headerRow.setVgrow(Priority.NEVER);
        grid.getRowConstraints().add(headerRow);

        for (int i = 0; i < rows; i++) {
            RowConstraints row = new RowConstraints();
            grid.getRowConstraints().add(row);
        }

        createLabels();

        grid.add(scoreLabel, 0, 0);
        grid.add(infoLabel, 1, 0);
        grid.add(triesLabel, 3, 0);

        for (int row = 0; row < rows +1; row++) {
            for (int col = 0; col < cols; col++) {
                Region cell = new Region();
                cell.setStyle("-fx-border-color: red; -fx-background-color: transparent;");
                grid.add(cell, col, row);
            }
        }

        createImageViews();
        
        grid.setPadding(new Insets(25,25,25,25));
        grid.setStyle("-fx-border-color: white;");
        grid.setBackground(
                new Background(
                        new BackgroundFill(Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY)
                )
        );
        Scene scene = new Scene(grid);
        stage.setScene(scene);
    }

createImageViews() 函数 #

private void createImageViews() {
        int imageViewCounter = 0;
        for (int i = 0; i < cols; i++) {
            for (int j = 0; j < rows; j++) {
                ImageView imageView = createImageView(imageViewCounter);
                StackPane container = new StackPane(imageView);
                container.setAlignment(Pos.CENTER);
                
                imageView.fitHeightProperty().bind(
                        container.heightProperty().subtract(2)
                );
                imageView.fitWidthProperty().bind(
                        container.widthProperty().subtract(2)
                );

                imageView.setPreserveRatio(true);
                grid.add(container, i, j+1);
                modelHolder.getImage(imageViewCounter++).setAssignedImageView(imageView);
            }
        }
    }

createImageView() 函数 #

private ImageView createImageView(int counter) {
        ImageView imageView = new ImageView();
        imageView.setOnMouseClicked(e -> {
            if (controller != null) {
                controller.onImageClicked(modelHolder.getImage(counter));
                updateLabels();
            }
        });
        return imageView;
    }

图片设置相关代码 #

启动时设置背景图 #

public void setAssignedImageView(ImageView assignedImageView) {
        this.assignedImageView = assignedImageView;
        assignedImageView.setImage(this.background);
    }

点击切换图片 #

public void showImage() {
        if (image == null) return;
        isShown(true);
        Platform.runLater(() -> assignedImageView.setImage(image));
    }

1. 初始图片无尺寸约束，撑大布局
   程序启动时设置的background图片以原始尺寸显示，直接撑大了StackPane和GridPane单元格，导致整个网格超出屏幕。后续点击切换图片后，新图片尺寸可能更小，网格才会逐渐收缩。

2. ColumnConstraints未配置自适应规则
   创建的ColumnConstraints没有设置宽度约束（如拉伸优先级、最大宽度），GridPane无法自动分配列宽，只能根据初始大图片的尺寸拉伸列。

3. 重叠的Region干扰布局计算
   createGrid()中循环添加的Region和后续的StackPane重叠在同一单元格，无尺寸约束的Region会打乱GridPane的布局逻辑。

1. 移除多余的Region控件
   删除createGrid()中添加红色边框Region的循环代码，避免控件重叠干扰布局：

// 删掉这段冗余代码
for (int row = 0; row < rows +1; row++) {
    for (int col = 0; col < cols; col++) {
        Region cell = new Region();
        cell.setStyle("-fx-border-color: red; -fx-background-color: transparent;");
        grid.add(cell, col, row);
    }
}

2. 给ColumnConstraints添加自适应约束
   修改列约束代码，让列宽自适应可用空间并限制最大宽度：

for (int i = 0; i < cols; i++) { // 改为cols，避免固定4列与实际列数不匹配
    ColumnConstraints col = new ColumnConstraints();
    col.setHgrow(Priority.SOMETIMES); // 允许列宽根据可用空间调整
    col.setMaxWidth(200); // 根据需求设置最大宽度，防止图片撑爆布局
    col.setFillWidth(true);
    grid.getColumnConstraints().add(col);
}

3. 给图片行的RowConstraints添加拉伸规则

for (int i = 0; i < rows; i++) {
    RowConstraints row = new RowConstraints();
    row.setVgrow(Priority.SOMETIMES); // 允许行高自适应
    row.setMaxHeight(200); // 限制最大行高
    grid.getRowConstraints().add(row);
}

4. 初始就给ImageView设置缩放规则
   在setAssignedImageView中补充初始缩放配置，避免启动时图片撑大布局：

public void setAssignedImageView(ImageView assignedImageView) {
    this.assignedImageView = assignedImageView;
    assignedImageView.setImage(this.background);
    // 确保初始就应用缩放逻辑
    assignedImageView.setPreserveRatio(true);
    assignedImageView.setFitWidth(100); // 设置初始合适尺寸，后续会被bind覆盖
    assignedImageView.setFitHeight(100);
}

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