让我的 JavaFX 应用程序适应不同屏幕尺寸的最简单方法

Question

就像我现在的代码一样，如果屏幕不够大以支持我设置的固定尺寸，应用程序的内容将被窗口截断。我想知道解决这个问题的最简单方法。我希望有某种方法可以简单地使 UI 适应窗口的大小，而不是更改每个 UI 元素。因此，窗口应该能够从角落拉出以调整大小，并且 UI 会随之移动。

这是舞台课：

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(false);
            primaryStage.show();
        } 
        catch (Exception e) {
            e.printStackTrace();
        }
    }
    
}

这是 .fxml 文件：

<?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.text.Font?>
<?import javafx.scene.image.Image?>


<AnchorPane prefHeight="960.0" prefWidth="540.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.login.LoginController">
   <children>
      <ImageView fitHeight="261.0" fitWidth="210.0" layoutX="171.0" layoutY="302.0" pickOnBounds="true" preserveRatio="true">
        <Image url="@ledger.png" />
      </ImageView>
      <Label layoutX="134.0" layoutY="132.0" text="EffortLoggerV2">
         <font>
            <Font size="42.0" />
         </font>
      </Label>
      <Label layoutX="43.0" layoutY="768.0" text="Username">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <Label layoutX="43.0" layoutY="818.0" text="Password">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <TextField layoutX="164.0" layoutY="770.0" prefHeight="25.0" prefWidth="224.0" />
      <TextField layoutX="164.0" layoutY="820.0" prefHeight="25.0" prefWidth="224.0" />
      <Button fx:id="loginButton" layoutX="416.0" layoutY="770.0" mnemonicParsing="false" prefHeight="73.0" prefWidth="86.0" text="Sign In">
         <font>
            <Font size="18.0" />
         </font>
      </Button>
      <Button fx:id="createAccountButton" layoutX="193.0" layoutY="889.0" mnemonicParsing="false" text="Create an Account">
         <font>
            <Font size="18.0" />
         </font>
      </Button>
   </children>
</AnchorPane>

是否有一种简单的方法可以做到这一点，或者这需要更改每个 UI 元素？

Answer 1

前言：

无法创建固定尺寸的屏幕尺寸自适应布局。

解决方案：

1. 在任何地方都使用计算出的尺寸作为最小尺寸。
2. 在任何地方都使用 maxValue 作为最大站点。
3. 在仅与上述方法不起作用的地方始终使用 hGrow。