JavaFX勾选CheckBox时GridPane宽度异常变宽问题咨询

问题现象 #

• 已将BorderPane宽度绑定为父容器HBox宽度的100%，期望通过BorderPane的left、right布局属性将2个按钮分别定位在容器左右角落
• 实际运行时勾选CheckBox会触发GridPane宽度自动增长，布局错乱
  

问题代码 #

FXML配置 #

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.CheckBox?>

<GridPane xmlns="http://javafx.com/javafx"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="com.javafx.events.intro.Controller"
          alignment="CENTER"
          vgap="15"
          prefHeight="400.0" prefWidth="600.0">

    <TextField GridPane.rowIndex="0" GridPane.columnIndex="0" fx:id="username" onMouseClicked="#setFocus"
               onKeyReleased="#keyReleased" promptText="Name" prefWidth="220" prefHeight="40"
               style="-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%)">
        <font>
            <Font name="Arial bold" size="15"/>
        </font>
    </TextField>

    <HBox GridPane.rowIndex="1" GridPane.columnIndex="0" spacing="10" fx:id="hbox"
          style="-fx-border-style: dashed;-fx-border-color: black">
        <BorderPane  style="-fx-border-style: dashed;-fx-border-color: red" fx:id="borderPane">
            <left>
                <Button fx:id="Hello" text="Hello" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
            </left>
            <right>
                <Button fx:id="Bye" text="Bye" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
            </right>
        </BorderPane>
    </HBox>

    <CheckBox onMouseClicked="#showGridPaneSize" GridPane.rowIndex="2" GridPane.columnIndex="0" text="Check"/>
</GridPane>

Controller代码 #

public class Controller {
    @FXML
    public TextField username;
    @FXML
    public Button Hello;
    @FXML
    public Button Bye;
    @FXML
    public BorderPane borderPane;
    @FXML
    public HBox hbox;

    @FXML
    public void initialize() {
        Hello.setDisable(true);
        Bye.setDisable(true);
       borderPane.prefWidthProperty().bind(hbox.widthProperty());
    }

    @FXML
    public void showGridPaneSize(){
        System.out.println(borderPane.widthProperty());
    }

    @FXML
    public void printUserName(ActionEvent event) {
        if (Objects.equals(username.getText(), "")) {
            System.out.println("Username is empty");
            username.setStyle("-fx-text-box-border: red ;-fx-focus-color: red ;");
        } else {
            if (event.getSource().equals(Hello))
                System.out.println("Hello " + username.getText().trim());
            else if (event.getSource().equals(Bye))
                System.out.println("Bye " + username.getText().trim());
        }
    }

    @FXML
    public void keyReleased() {
        String text = username.getText();
        boolean disabledButton = text.isEmpty() || text.trim().isEmpty();
        Hello.setDisable(disabledButton);
        Bye.setDisable(disabledButton);
    }

    @FXML
    public void setFocus() {
        username.setStyle("-fx-text-box-border: blue ;-fx-focus-color: blue ;");
    }
}

故障原因 #

• 核心问题是宽度绑定造成了布局计算循环依赖：HBox计算自身宽度时，会先统计所有子节点的首选宽度总和加间距，再结合自身可用空间调整尺寸。代码里把子节点BorderPane的首选宽度反向绑定到HBox的实际宽度，只要任意控件触发重布局（比如勾选CheckBox时渲染选中标记、焦点边框），就会出现「HBox变宽→BorderPane prefWidth变宽→HBox被撑得更宽」的死循环，最终表现为GridPane宽度不断自动增长。
• 这种手动绑定父容器宽度的写法本身就不符合JavaFX布局规范，JavaFX提供了原生的布局优先级配置实现子节点占满父容器剩余空间，不需要手动写绑定逻辑。

修复步骤 #

1. 删除initialize()方法中错误的宽度绑定代码：

// 移除这行错误绑定
// borderPane.prefWidthProperty().bind(hbox.widthProperty());

2. 修改FXML中BorderPane的配置，添加HBox水平增长优先级属性，让布局管理器自动将HBox的剩余水平空间分配给BorderPane：

<BorderPane  style="-fx-border-style: dashed;-fx-border-color: red" fx:id="borderPane"
             HBox.hgrow="ALWAYS">
    <left>
        <Button fx:id="Hello" text="Hello" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
    </left>
    <right>
        <Button fx:id="Bye" text="Bye" onAction="#printUserName" prefWidth="60" prefHeight="25"/>
    </right>
</BorderPane>

改完后重启应用即可：BorderPane会自动占满HBox的全部可用宽度，两个按钮自动停靠在左右两侧，勾选CheckBox也不会再触发宽度异常增长的问题。

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