调整大小时控件需要保持居中（响应式 UI、JavaFX）答案

【问题标题】：Controls need to stay centered when resizing (responsive UI, JavaFX)调整大小时控件需要保持居中（响应式 UI、JavaFX）
【发布时间】：2018-11-15 06:53:37
【问题描述】：

我有这个代码

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

这是它的外观默认。

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

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

我想让这个场景具有响应性，以便顶部的横幅占据窗口的整个宽度，图像（奖杯）居中，所有“登录”控件均居中。强>

我已经尝试了很多不同的窗格，但我仍然无法弄清楚。如您所见，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>

【问题讨论】：

尝试通过设置布局策略来考虑使用 StackPane、HBox、VBox、GridPane 等进行布局。这将解决您的响应问题。
@SaiDandem 你能看看我所做的编辑吗？
尝试删除 AnchorPane。在这里，您不需要对 Rectangle 进行额外的包装。只需将 Rectangle 作为 StackPane 的子项放置并删除您在 Rectangle 中定义的所有 AnchorPane 内容。默认情况下，StackPane 将其子项对齐到 CENTER。您可以通过更新对齐属性来更改它。也可以尝试考虑@fabian 的答案。

标签： java javafx responsive scenebuilder

【解决方案1】：

Rectangles 不可调整大小。您应该改用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>

【讨论】：

啊，谢谢！我将尝试对此进行试验以找到理想的解决方案。但是是否可以在外部 VBox 上设置最小宽度和高度？我已经在属性中做到了这一点，但我仍然可以在下面调整大小。
@idontunderstandarrays 场景根可以被强制调整到最小尺寸以下。如果你想防止这种情况，你应该使用Stage的属性来做到这一点。
知道了，但不知何故我仍然可以稍微改变高度，这很奇怪，因为它完全一样。 stage.setMinHeight(768);stage.setMinWidth(1366);