如何在JavaFX中设置绑定 使两矩形窗口缩放时保持相对宽距

你的问题出在使用Group作为容器的特性上：Group的尺寸完全由它内部的子元素决定，而你把矩形的位置、宽度绑定到HBox的宽度，HBox的宽度又依赖Group的尺寸，这就形成了循环绑定依赖，导致计算出的位置和宽度不符合预期，最终两个矩形重叠。

修复方案：用Pane替代Group #

Pane会自动填充父容器的可用空间，它的尺寸会和HBox的有效空间（减去padding）保持一致，这样绑定的数值就能正确反映窗口的实际宽度。

修改后的代码如下：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.layout.Priority;
import javafx.geometry.Insets;

public class BarChartDemo extends Application {
    @Override
    public void start(Stage primaryStage) {
        HBox hBox = new HBox();

        // 用Pane代替Group，支持填充父容器空间
        Pane pane = new Pane();

        Rectangle rectangle1 = new Rectangle();
        // 绑定到Pane的宽度（即HBox的有效宽度）
        rectangle1.xProperty().bind(pane.widthProperty().multiply(0.1));
        rectangle1.setY(100);
        rectangle1.widthProperty().bind(pane.widthProperty().multiply(0.2));
        rectangle1.setHeight(400);
        rectangle1.setFill(Color.BLUE); // 添加颜色便于区分

        Rectangle rectangle2 = new Rectangle();
        rectangle2.xProperty().bind(pane.widthProperty().multiply(0.3));
        rectangle2.setY(100);
        rectangle2.widthProperty().bind(pane.widthProperty().multiply(0.4));
        rectangle2.setHeight(400);
        rectangle2.setFill(Color.RED); // 添加颜色便于区分

        pane.getChildren().addAll(rectangle1, rectangle2);

        hBox.setPadding(new Insets(20,20,20,20));
        hBox.getChildren().add(pane);
        // 让Pane占满HBox水平方向的所有可用空间
        HBox.setHgrow(pane, Priority.ALWAYS);

        Scene scene = new Scene(hBox);

        primaryStage.setScene(scene);
        primaryStage.setTitle("Bar Chart");
        primaryStage.show();
    }

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

关键修改点说明： #

• 替换Group为Pane，确保容器尺寸与父容器（HBox）的有效空间同步，打破循环依赖。
• 添加HBox.setHgrow(pane, Priority.ALWAYS);，让Pane在HBox中自动扩展，占满水平方向可用空间。
• 将矩形的绑定目标从hBox.widthProperty()改为pane.widthProperty()，保证绑定的是实际可用的布局空间。

调整后，窗口大小变化时，两个矩形会按设定比例保持宽度和间距，不会再出现重叠问题。

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