Javafx 组件应始终位于 AnchorPane 的中心

Question

我希望我的 Javafx 组件(如标签、TextFields 分别包装在 VBox 中)保持在窗口的中央，即使它已调整大小。见附件图片。目前这些组件包含在 anchorPane 中。FXML 文件代码如下。请给我一个如何做到这一点的想法。谢谢。

Image for small size window where components are in middle.

Full sized window but component position is not changed.

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

<?import javafx.scene.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="650.0" minWidth="850.0" prefHeight="650.0" prefWidth="850.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
  <HBox layoutY="-1.0" minWidth="500.0" prefHeight="653.0" prefWidth="850.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
     <children>
        <MenuBar layoutY="-1.0" minWidth="500.0" prefHeight="30.0" prefWidth="850.0" HBox.hgrow="ALWAYS">
          <menus>
            <Menu mnemonicParsing="false" text="Account">
              <items>
                <MenuItem fx:id="menuItemCreate" mnemonicParsing="false" text="Create" />
                    <MenuItem fx:id="menuItemUpdate" mnemonicParsing="false" text="Update" />
                    <MenuItem fx:id="menuItemDelete" mnemonicParsing="false" text="Delete" />
                    <MenuItem fx:id="menuItemLedger" mnemonicParsing="false" text="Ledger" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="In Stock">
              <items>
                <MenuItem fx:id="menuItemAddItem" mnemonicParsing="false" text="Add items" />
                    <MenuItem fx:id="menuItemInventory" mnemonicParsing="false" text="Inventory" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Reports">
              <items>
                <MenuItem fx:id="menuItemSalesReport" mnemonicParsing="false" text="Sales report" />
                    <MenuItem fx:id="menuItemProfitReport" mnemonicParsing="false" text="Profit report" />
                    <MenuItem fx:id="menuItemRcvables" mnemonicParsing="false" text="Receivables" />
              </items>
            </Menu>
          </menus>
        </MenuBar>
     </children>
  </HBox>
  <AnchorPane fx:id="anchorPaneUpdate" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false">
     <children>
        <VBox layoutX="300.0" layoutY="150.0" prefHeight="120.0" prefWidth="60.0" spacing="30.0">
           <children>
              <Label alignment="BASELINE_RIGHT" prefWidth="60.0" text="Full Name" BorderPane.alignment="CENTER" VBox.vgrow="NEVER" />
              <Label alignment="BASELINE_RIGHT" layoutX="10.0" layoutY="10.0" prefWidth="60.0" text="Address" VBox.vgrow="NEVER" />
              <Label alignment="BASELINE_RIGHT" layoutX="10.0" layoutY="27.0" prefWidth="60.0" text="CNIC" VBox.vgrow="NEVER" />
              <Label alignment="BASELINE_RIGHT" layoutX="10.0" layoutY="44.0" prefWidth="60.0" text="Mobile #" VBox.vgrow="NEVER" />
           </children>
        </VBox>
        <VBox layoutX="400.0" layoutY="150.0" spacing="20.0">
           <children>
              <TextField layoutX="10.0" layoutY="10.0" promptText="Full name" />
              <TextField promptText="Full name" VBox.vgrow="NEVER" />
              <TextField promptText="Current address" VBox.vgrow="NEVER" />
              <TextField promptText="XXXXX-XXXXXXX-X" VBox.vgrow="NEVER" />
              <TextField promptText="XXXX-XXXXXXX" VBox.vgrow="NEVER" />
              <Button mnemonicParsing="false" prefWidth="70.0" text="Create" />
           </children>
        </VBox>
        <Label layoutX="50.0" layoutY="80.0" text="Update a customer account">
           <font>
              <Font name="Arial Narrow Bold" size="17.0" />
           </font>
        </Label>
     </children></AnchorPane>
  <AnchorPane fx:id="anchorPaneDelete" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPaneLedger" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPaneAddItem" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPaneInventory" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPaneSalesReport" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPaneProfitReport" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <AnchorPane fx:id="anchorPanerRcvable" layoutY="30.0" prefHeight="620.0" prefWidth="850.0" visible="false" />
  <VBox layoutX="300.0" layoutY="230.0" AnchorPane.bottomAnchor="199.0" AnchorPane.leftAnchor="300.0" AnchorPane.rightAnchor="301.0" AnchorPane.topAnchor="200.0">
     <children>
        <StackPane fx:id="pane_main" minHeight="200.0" minWidth="200.0" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
           <children>
              <Group>
                 <children>
                    <VBox spacing="10.0">
                       <children>
                          <HBox prefHeight="30.0" prefWidth="330.0" spacing="30.0">
                             <children>
                                <Label alignment="BASELINE_RIGHT" prefWidth="80.0" text="Search Name" />
                                <TextField minWidth="130.0" prefWidth="130.0" promptText="Enter name" />
                             </children>
                          </HBox>
                          <Label alignment="BASELINE_RIGHT" prefWidth="80.0" text="Details:" />
                          <Separator minWidth="165.0" prefHeight="10.0" prefWidth="330.0" />
                          <HBox spacing="30.0">
                             <children>
                                <VBox spacing="30.0">
                                   <children>
                                      <Label alignment="BASELINE_RIGHT" prefWidth="80.0" text="Full Name" VBox.vgrow="NEVER" />
                                      <Label alignment="BASELINE_RIGHT" layoutX="10.0" layoutY="10.0" prefWidth="80.0" text="Address" VBox.vgrow="NEVER" />
                                      <Label alignment="BASELINE_RIGHT" layoutX="10.0" layoutY="10.0" prefWidth="80.0" text="CNIC" VBox.vgrow="NEVER" />
                                      <Label alignment="BASELINE_RIGHT" layoutX="20.0" layoutY="20.0" prefWidth="80.0" text="Mobile #" VBox.vgrow="NEVER" />
                                   </children>
                                </VBox>
                                <VBox layoutX="100.0" spacing="20.0">
                                   <children>
                                      <TextField minWidth="130.0" prefWidth="130.0" promptText="Full name" VBox.vgrow="NEVER" />
                                      <TextField minWidth="130.0" prefWidth="130.0" promptText="Current address" VBox.vgrow="NEVER" />
                                      <TextField minWidth="130.0" prefWidth="130.0" promptText="XXXXX-XXXXXXX-X" VBox.vgrow="NEVER" />
                                      <TextField minWidth="130.0" prefWidth="130.0" promptText="XXXX-XXXXXXX" VBox.vgrow="NEVER" />
                                      <Button minWidth="70.0" mnemonicParsing="false" prefWidth="70.0" text="Create" VBox.vgrow="NEVER" />
                                   </children>
                                </VBox>
                             </children>
                          </HBox>
                          <Label text="Update a customer account" VBox.vgrow="NEVER">
                             <font>
                                <Font name="Arial Narrow Bold" size="17.0" />
                             </font>
                          </Label>
                       </children>
                    </VBox>
                 </children>
              </Group>
           </children>
        </StackPane>
     </children>
  </VBox>
  </children>
  </AnchorPane>

Answer 1

你应该把所有你喜欢的东西放在一个组的中间。然后将您的组放在 StackPane 中。这样您的组始终位于 StackPane 的中心。根据需要定义 StackPane 的大小，或者将其绑定(bind)到 AnchorPane 父级，如示例所示:

在fxml中应该变成这样:

    <AnchorPane>
       <children>
          <StackPane AnchorPane.bottomAnchor="0.0" AnchorPane.left...>
             <children>
                <Group StackPane.alignment="CENTER">
                   <children>
                      ...       
                    </children>
                 </Group>
              </children>
            </StackPane>
          </children>
     </AnchorPane>

这应该可以解决您的问题。