JavaFX组件缩放后VBox父容器出现多余空白间距问题求解

问题原因 #

setScaleX/setScaleY属于JavaFX的视觉渲染层变换，仅修改组件的显示效果，不会改变组件的布局属性（prefHeight/prefWidth/layoutBounds）。VBox计算布局时仍然按照自定义组件原始的294px高度、195px宽度预留空间，就会出现缩放后组件周围有大量空白的问题。

解决方案 #

方案1：手动设置缩放后的布局尺寸（易控制）

直接指定组件缩放后的布局尺寸，让VBox按照实际显示大小计算布局，修改addLeader方法代码即可：

private void addLeader(LeaderCard newLeader) {
    Platform.runLater(() -> {
        setStyle("-fx-background-color: grey;");

        LeaderCardWidget newWidget = new LeaderCardWidget(newLeader);
        newWidget.setStyle("-fx-border-color: black;" +
                "-fx-border-width: 3");

        // 按缩放比例计算实际布局尺寸
        double scaleRate = 0.75;
        double scaledWidth = 195 * scaleRate;
        double scaledHeight = 294 * scaleRate;
        // 固定组件布局尺寸为缩放后的大小
        newWidget.setPrefSize(scaledWidth, scaledHeight);
        newWidget.setMaxSize(scaledWidth, scaledHeight);
        newWidget.setMinSize(scaledWidth, scaledHeight);
        // 执行缩放保证组件内部内容同步缩小
        newWidget.setScaleX(scaleRate);
        newWidget.setScaleY(scaleRate);
        // 可根据需求调整两个组件的垂直间距
        leaderDisplay.setSpacing(10);

        leaderDisplay.getChildren().add(newWidget);
        leadersAndWidgets.put(newLeader, newWidget);
    });
}

方案2：用Group包装组件（无需手动计算尺寸）

Group容器会自动根据子节点的视觉边界（包含缩放后的实际显示大小）计算自身的布局尺寸，不需要手动计算缩放后的宽高：

private void addLeader(LeaderCard newLeader) {
    Platform.runLater(() -> {
        setStyle("-fx-background-color: grey;");

        LeaderCardWidget newWidget = new LeaderCardWidget(newLeader);
        newWidget.setStyle("-fx-border-color: black;" +
                "-fx-border-width: 3");

        newWidget.setScaleX(0.75);
        newWidget.setScaleY(0.75);
        // 用Group包装后再加入VBox
        Group widgetWrapper = new Group(newWidget);
        leaderDisplay.getChildren().add(widgetWrapper);

        leadersAndWidgets.put(newLeader, newWidget);
    });
}

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