При изменении размера элементы управления должны оставаться в центре (отзывчивый пользовательский интерфейс, 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>

Вот так выглядит по умолчанию .

Когда я делаю окно больше , оно выглядит следующим образом.

И когда я делаю окно меньше , оно выглядит следующим образом.

Я хочу сделать эту сцену отзывчивой, чтобы баннер в верхней части отображался по всей ширине окна, центрировался по изображению (throphy) и все элементы управления 'login' центрировались на странице.

Я уже пробовал с кучей разных панелей, но я все еще не могу понять это. Как вы можете видеть, AnchorPane имеет эти AnchorPane.'direction'anchor = "0.0", но это также не работает для меня. Я понял это из этого урока, https://www.youtube.com/watch?v=5_v58NRTOTM&.

Так что, если бы кто-нибудь мог помочь мне разобраться, как сделать эту сцену отзывчивой, я был бы очень благодарен!

EDIT:

Теперь у меня есть это, но даже здесь оно не будет меняться с окном.

<?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

Rectangle s не могут быть изменены.Вместо этого вы должны использовать 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>