java - 调整大小时控件需要保持居中(响应式 UI、JavaFX)

Question

我有这个代码

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

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXPasswordField?>
<?import com.jfoenix.controls.JFXTextField?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.paint.LinearGradient?>
<?import javafx.scene.paint.Stop?>
<?import javafx.scene.shape.Rectangle?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">
    <children>
          <Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
             <fill>
                <LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518">
                   <stops>
                      <Stop color="BLACK" />
                      <Stop color="#2f406b" offset="1.0" />
                   </stops>
                </LinearGradient>
             </fill>
          </Rectangle>
          <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">
             <image>
                <Image url="@../../resources/WordCrex_Logo.png" />
             </image>
          </ImageView>
          <Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login">
             <font>
                <Font name="System Bold" size="22.0" />
             </font>
          </Label>
          <Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0">
             <children>
                <FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" />
                <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" />
                <JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam">
                   <font>
                      <Font size="16.0" />
                   </font>
                </JFXTextField>
                <JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord">
                   <font>
                      <Font size="16.0" />
                   </font>
                </JFXPasswordField>
                <JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">
                   <font>
                      <Font size="16.0" />
                   </font>
                </JFXButton>
             </children>
          </Pane>
          <Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE">
             <font>
                <Font size="20.0" />
             </font>
          </Label>    
     </children> 
</AnchorPane>

这就是默认的样子。

当我将窗口变大时，它看起来像这样。

当我将窗口变小时，它看起来像这样。

我想让这个场景具有响应性，以便顶部的横幅占据窗口的整个宽度，图像(奖状)居中，所有“登录”控件都居中在页面中。

我已经尝试过一堆不同的 Pane ，但我仍然无法弄清楚。正如您所看到的 AnchorPane 有那些 AnchorPane.'direction'anchor = "0.0"，但这对我来说也不起作用。我从本教程中得到了这一点，https://www.youtube.com/watch?v=5_v58NRTOTM& .

因此，如果有人可以帮助我弄清楚如何使这个场景具有响应性，我将非常感激!

编辑:

我现在有了这个，但即使在这里它也不会随窗口调整大小。

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

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Rectangle?>


<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="768.0" prefWidth="1366.0">
         <children>
            <Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
   </children>
</StackPane>

Answer 1

矩形不可调整大小。您应该使用 Region 或子类型，并将渐变应用为背景。

此外，AnchorPane 不适合居中节点。如果您只想将登录控件水平居中，我建议将所有内容包装在 VBox 中。否则将这些控件包装在 StackPane 中，并将其包装到 VBox

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">
   <children>
      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">
         <children>
            <VBox maxHeight="-Infinity" maxWidth="-Infinity">
              <children>
                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">
                  <image>
                    <Image url="@../../resources/WordCrex_Logo.png" />
                  </image>
                </ImageView>
                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">
                  <font>
                    <Font size="20.0" />
                  </font>
                </Label>
              </children>
            </VBox>
         </children>
      </StackPane>
      <StackPane VBox.vgrow="ALWAYS">
         <children>
            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">
               <children>
                   <Label fx:id="lblLogin" text="Login">
                       <font>
                           <Font name="System Bold" size="22.0" />
                       </font>
                  </Label>
                  <GridPane>
                    <columnConstraints>
                      <ColumnConstraints hgrow="NEVER" />
                      <ColumnConstraints prefWidth="225.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints vgrow="SOMETIMES" />
                      <RowConstraints vgrow="SOMETIMES" />
                    </rowConstraints>
                    <children>
                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />
                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />
                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">
                           <font>
                              <Font size="16.0" />
                           </font>
                        </JFXTextField>
                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">
                           <font>
                              <Font size="16.0" />
                           </font>
                        </JFXPasswordField>
                    </children>
                  </GridPane>
                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">
                      <font>
                          <Font size="16.0" />
                      </font>
                  </JFXButton>
               </children>
            </VBox>
         </children>
      </StackPane>
   </children>
</VBox>