JavaFX中如何将GridPane列数与窗口大小动态绑定？

我用JavaFX实现了一个动态GridPane，给其中的项添加了自定义样式，但列数是静态固定的（当前为3列），当窗口尺寸增大时，右侧会出现大量空白区域，影响布局美观。

默认窗口大小效果：

窗口放大后的效果：

当前初始化GridPane的代码如下：

public void initgrit() {
    noBarcodes = new ArrayList<>(products());
    int col = 0;
    int row = 0;
    for (ProductNoBarcode noBarcode : noBarcodes) {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader();
            fxmlLoader.setLocation(getClass().getResource("/fxml/testView.fxml"));
            VBox vBox = fxmlLoader.load();
            testView testView1 = fxmlLoader.getController();
            testView1.setInfo(noBarcode);
            if (col == 3) {
                col = 0;
                ++row;
            }
            gridPane.add(vBox, col++, row);
            GridPane.setMargin(vBox, new Insets(10, 10, 10, 10));

        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

两种可行解决方案 #

方案1：动态调整GridPane列数 #

监听窗口宽度变化，根据元素的实际宽度（包含边距）计算当前可容纳的列数，实时重排GridPane内的元素：

// 根据你的项实际尺寸调整这个值（包含margin）
private final double ITEM_WIDTH = 200;

public void initgrit() {
    noBarcodes = new ArrayList<>(products());
    refreshGridItems();
    
    // 监听窗口宽度变化，触发重排
    gridPane.sceneProperty().addListener((obs, oldScene, newScene) -> {
        if (newScene != null) {
            newScene.widthProperty().addListener((wObs, oldWidth, newWidth) -> refreshGridItems());
        }
    });
}

private void refreshGridItems() {
    gridPane.getChildren().clear();
    // 计算当前可容纳的列数，最少1列
    int colCount = Math.max(1, (int) Math.floor(gridPane.getWidth() / ITEM_WIDTH));
    int col = 0;
    int row = 0;
    
    for (ProductNoBarcode noBarcode : noBarcodes) {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader();
            fxmlLoader.setLocation(getClass().getResource("/fxml/testView.fxml"));
            VBox vBox = fxmlLoader.load();
            testView testView1 = fxmlLoader.getController();
            testView1.setInfo(noBarcode);
            
            if (col == colCount) {
                col = 0;
                row++;
            }
            gridPane.add(vBox, col++, row);
            GridPane.setMargin(vBox, new Insets(10, 10, 10, 10));
            
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

方案2：改用FlowPane替代GridPane #

FlowPane自带自动换行功能，会根据容器宽度自动调整每行元素数量，无需手动计算列数，更适合这类动态布局场景：

// 将原有的GridPane替换为FlowPane
private FlowPane flowPane;

public void initFlowPane() {
    noBarcodes = new ArrayList<>(products());
    flowPane.setHgap(10); // 设置水平间距
    flowPane.setVgap(10); // 设置垂直间距
    flowPane.setPadding(new Insets(10)); // 设置内边距
    
    for (ProductNoBarcode noBarcode : noBarcodes) {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader();
            fxmlLoader.setLocation(getClass().getResource("/fxml/testView.fxml"));
            VBox vBox = fxmlLoader.load();
            testView testView1 = fxmlLoader.getController();
            testView1.setInfo(noBarcode);
            // 可选：固定项的最小宽度，保证布局整齐
            vBox.setMinWidth(200);
            flowPane.getChildren().add(vBox);
            
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

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