如何让JavaFX应用适配不同屏幕尺寸？最简方案咨询

我的JavaFX应用设置了固定尺寸，当屏幕尺寸不足时，应用内容会被窗口截断。希望找到无需逐个修改UI元素的最简方案，实现窗口可拖动调整大小且UI同步自适应。

最简实现步骤 #

1. 修改Java代码，允许窗口调整大小 #

找到Login类中固定窗口尺寸的代码，改为允许调整大小并设置最小尺寸，避免窗口被缩得过小：

public class Login {
    
    public void show(Stage primaryStage) {
        
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("Login.fxml"));
            Parent root = loader.load();
            Scene scene = new Scene(root);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            // 允许窗口拖动调整大小
            primaryStage.setResizable(true);
            // 设置最小尺寸，保留原有布局的基础显示效果
            primaryStage.setMinWidth(540);
            primaryStage.setMinHeight(960);
            primaryStage.show();
        } 
        catch (Exception e) {
            e.printStackTrace();
        }
    }
    
}

2. 修改FXML布局，实现UI自适应 #

现有布局用AnchorPane但所有元素都是固定位置，无法跟随窗口变化。最简方式是在外层添加自适应容器，利用容器的自动布局特性实现元素对齐与自适应，无需逐个修改元素位置：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.image.Image?>


<AnchorPane xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.login.LoginController">
   <children>
      <!-- 外层VBox作为自适应容器，居中对齐并设置元素间距 -->
      <VBox alignment="CENTER" spacing="40.0" 
            AnchorPane.topAnchor="20.0" AnchorPane.bottomAnchor="20.0"
            AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0">
         <children>
            <Label text="EffortLoggerV2">
               <font>
                  <Font size="42.0" />
               </font>
            </Label>
            <ImageView fitHeight="261.0" fitWidth="210.0" pickOnBounds="true" preserveRatio="true">
              <Image url="@ledger.png" />
            </ImageView>
            <!-- 用户名区域用HBox保持标签与输入框的水平对齐 -->
            <HBox spacing="20.0" alignment="CENTER_LEFT">
               <children>
                  <Label text="Username">
                     <font>
                        <Font size="24.0" />
                     </font>
                  </Label>
                  <TextField prefHeight="25.0" prefWidth="224.0" />
                  <Button fx:id="loginButton" mnemonicParsing="false" prefHeight="73.0" prefWidth="86.0" text="Sign In">
                     <font>
                        <Font size="18.0" />
                     </font>
                  </Button>
               </children>
            </HBox>
            <!-- 密码区域用HBox保持水平对齐 -->
            <HBox spacing="20.0" alignment="CENTER_LEFT">
               <children>
                  <Label text="Password">
                     <font>
                        <Font size="24.0" />
                     </font>
                  </Label>
                  <TextField prefHeight="25.0" prefWidth="224.0" />
               </children>
            </HBox>
            <Button fx:id="createAccountButton" mnemonicParsing="false" text="Create an Account">
               <font>
                  <Font size="18.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</AnchorPane>

方案说明 #

• 仅通过添加VBox和HBox容器实现自适应，无需逐个修改原有UI元素的位置属性。
• VBox绑定到AnchorPane四边，随窗口大小自动拉伸，内部元素始终居中显示。
• HBox用于保持输入区域的水平对齐，避免窗口调整时元素错位。

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