全屏时Javafx调整组件大小

Question

原始尺寸截图

全屏截图

当我调整大小时，我怎样才能很好地排列组件。我在 GUI 中使用 FXML

FXML 代码

    <AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="style.LoginController">
   <children>
      <Button fx:id="login" layoutX="250.0" layoutY="242.0" mnemonicParsing="false" onAction="#login" prefHeight="32.0" prefWidth="101.0" text="Login" />
      <ImageView fx:id="img2" fitHeight="32.0" fitWidth="32.0" layoutX="109.0" layoutY="184.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../../../../../Downloads/Drawing%20(23).png" />
         </image>
      </ImageView>
      <Label fx:id="title" alignment="CENTER" focusTraversable="false" layoutX="166.0" layoutY="48.0" opacity="0.83" prefHeight="42.0" prefWidth="269.0" styleClass="title" text="Label" textAlignment="CENTER" textOverrun="CENTER_ELLIPSIS">
         <font>
            <Font name="Arial Narrow" size="36.0" />
         </font>
      </Label>
      <TextField fx:id="txtusername" layoutX="159.0" layoutY="126.0" prefHeight="32.0" prefWidth="283.0" promptText="Username" styleClass="fields" />
      <PasswordField fx:id="txtpassword" layoutX="159.0" layoutY="183.0" prefHeight="32.0" prefWidth="283.0" promptText="Password" styleClass="fields" />
      <ImageView fx:id="img1" fitHeight="32.0" fitWidth="32.0" layoutX="109.0" layoutY="126.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../../../../../Downloads/Drawing%20(22).png" />
         </image>
      </ImageView>
      <ProgressIndicator fx:id="progress" layoutX="197.0" layoutY="120.0" minHeight="0.0" minWidth="0.0" prefHeight="128.0" prefWidth="188.0" progress="0.0" styleClass="progressind" />
   </children>
</AnchorPane>

Answer 1

问题是因为您将 AnchorPane 用作根窗格。虽然，您可以在这种情况下使用 AnchorPane，但我个人 不喜欢它，因为您需要做很多事情才能正确使用。有更简单的方法，这就是我要告诉你的。

来自 Javadocs :

AnchorPane allows the edges of child nodes to be anchored to an offset from the anchor pane's edges.

解决方案

使用不同的布局。可能是 GridPane or VBox. These layouts have child alignment 而不是锚点，它允许 children 对齐到特定位置。

对于 re-sizing 你的 children，你可以在它们上面设置 HGrow / VGrow 属性。

例子

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" spacing="20.0" style="-fx-background-color: DARKCYAN;" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Easy Doctor" />
      <TextField promptText="Username" />
      <TextField promptText="Password" />
   </children>
   <padding>
      <Insets bottom="50.0" left="50.0" right="50.0" top="50.0" />
   </padding>
</VBox>

这是一个关于它的外观的小 gif：

Answer 2

请加

AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"

对于您的图像、按钮、标签等组件，特定尺寸意味着当屏幕调整大小时，它会像 css 中的边距一样调整。

或

您可以添加 css 以根据屏幕尺寸对齐此组件喜欢

Scene scene = new Scene(root);
scene.getStylesheets().add(locator.locateAsURL("Css/StudentApp.css").toExternalForm());
scene.getStylesheets().add(("CSS/studentapp.css"));

全屏时Javafx调整组件大小

Javafx resize components when fullscreen

java

javafx

javafx-2

javafx-8