JavaFX BeatBox应用全屏最大化时组件自动对齐问题求助

我帮你分析了下问题的核心：你当前的FXML里给所有组件都设置了固定的layoutX和layoutY坐标，而且AnchorPane没有配置锚点约束，根VBox还固定了pref尺寸，这些设置会让组件在窗口最大化后完全失去自适应能力，只能停留在固定位置。

下面是具体的修复方案和调整后的完整代码：

关键修复要点 #

• 移除所有组件的layoutX、layoutY属性，改用布局容器的约束来控制位置
• 给AnchorPane设置锚点，让它完全填充父容器VBox
• 使用HBox分组左右两侧的ImageView和按钮，实现自动均分空间的布局
• 让标题Label居中显示，进度条自适应窗口宽度

调整后的完整FXML代码 #

<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXProgressBar?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="box.firstcontroller">
    <children>
        <!-- 配置AnchorPane锚点，让它完全填充父容器 -->
        <AnchorPane style="-fx-background-color: #78909C;" VBox.vgrow="ALWAYS">
            <topAnchor>0.0</topAnchor>
            <bottomAnchor>0.0</bottomAnchor>
            <leftAnchor>0.0</leftAnchor>
            <rightAnchor>0.0</rightAnchor>
            
            <children>
                <!-- 标题Label：设置左右锚点为0，水平居中显示 -->
                <Label text="BeatBox" AnchorPane.topAnchor="36.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                    <font>
                        <Font name="Tempus Sans ITC" size="41.0" />
                    </font>
                    <alignment>CENTER</alignment>
                </Label>
                
                <!-- 中间内容容器：用HBox实现左右均分布局 -->
                <HBox spacing="20.0" AnchorPane.topAnchor="94.0" AnchorPane.bottomAnchor="80.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
                    <!-- 左侧注册区域：VBox垂直排列图片和按钮，占满左侧空间 -->
                    <VBox alignment="CENTER" spacing="20.0" HBox.hgrow="ALWAYS">
                        <ImageView fitHeight="186.0" fitWidth="164.0" pickOnBounds="true" preserveRatio="true">
                            <cursor>
                                <Cursor fx:constant="S_RESIZE" />
                            </cursor>
                            <image>
                                <Image url="@../login.png" />
                            </image>
                        </ImageView>
                        <JFXButton fx:id="signup" buttonType="RAISED" onAction="#signupform" prefHeight="44.0" prefWidth="115.0" ripplerFill="#752f2f" style="-fx-background-color: #ae2121;" text="Sign Up" textFill="#fcfcfcf2">
                            <font>
                                <Font name="Webdings" size="20.0" />
                            </font>
                        </JFXButton>
                    </VBox>
                    
                    <!-- 右侧登录区域：VBox垂直排列图片和按钮，占满右侧空间 -->
                    <VBox alignment="CENTER" spacing="20.0" HBox.hgrow="ALWAYS">
                        <ImageView fitHeight="164.0" fitWidth="151.0" pickOnBounds="true" preserveRatio="true">
                            <image>
                                <Image url="@../signup.png" />
                            </image>
                        </ImageView>
                        <JFXButton fx:id="signin" onAction="#signinform" prefHeight="44.0" prefWidth="115.0" style="-fx-background-color: #ae2121;" text="Sign In" textFill="WHITE">
                            <font>
                                <Font size="20.0" />
                            </font>
                        </JFXButton>
                    </VBox>
                </HBox>
                
                <!-- 底部进度条：设置左右锚点，自适应窗口宽度 -->
                <JFXProgressBar AnchorPane.bottomAnchor="33.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" />
            </children>
        </AnchorPane>
    </children>
</VBox>

代码说明 #

1. 根VBox：移除了固定的prefHeight和prefWidth，会自动填充整个舞台尺寸
2. AnchorPane锚点：通过topAnchor、bottomAnchor等属性让容器完全占满父空间
3. 标题Label：利用左右锚点+居中对齐实现窗口变化时始终居中
4. 中间HBox布局：让左右两个VBox区域均分可用宽度，图片和按钮垂直居中排列
5. 进度条：通过左右锚点约束，宽度随窗口大小自动调整

Java代码注意事项 #

你的primaryStage.setMaximized(true)代码不需要修改，只要确保FXML加载逻辑正确：

FXMLLoader loader = new FXMLLoader(getClass().getResource("your-filename.fxml"));
Parent root = loader.load();
primaryStage.setScene(new Scene(root));
primaryStage.setMaximized(true);
primaryStage.show();

这样调整后，不管窗口是正常尺寸还是最大化状态，所有组件都会自动自适应对齐，不会再出现靠左堆积的问题啦。

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