调整舞台大小时调整舞台组件的大小

Question

以下屏幕截图是舞台的默认大小

调整大小时

在相应调整舞台窗口大小时如何调整内部组件的大小？

<AnchorPane fx:id="mainpane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="809.0" prefWidth="860.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxhomeui_1.HomeUI_2Controller">
<children>
  <VBox layoutX="695.0" layoutY="137.0" AnchorPane.bottomAnchor="341.0" AnchorPane.leftAnchor="695.0" AnchorPane.rightAnchor="-2.0" AnchorPane.topAnchor="137.0">
     <children>
        <SplitPane fx:id="sidebar" layoutX="695.0" layoutY="137.0" prefHeight="331.0" prefWidth="167.0" AnchorPane.bottomAnchor="341.0" AnchorPane.leftAnchor="695.0" AnchorPane.rightAnchor="-2.0" AnchorPane.topAnchor="137.0" />
     </children>
  </VBox>
  <HBox layoutX="37.0" layoutY="163.0" AnchorPane.bottomAnchor="38.0" AnchorPane.leftAnchor="37.0" AnchorPane.rightAnchor="257.0" AnchorPane.topAnchor="163.0">
     <children>
        <ScrollPane fx:id="displayscroll" layoutX="37.0" layoutY="163.0" prefHeight="608.0" prefWidth="566.0" AnchorPane.bottomAnchor="29.0" AnchorPane.leftAnchor="37.0" AnchorPane.rightAnchor="197.0" AnchorPane.topAnchor="163.0">
           <content>
              <GridPane fx:id="gridpane" prefHeight="383.0" prefWidth="449.0">
                <columnConstraints>
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                </columnConstraints>
                <rowConstraints>
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                </rowConstraints>
              </GridPane>
           </content>
        </ScrollPane>
     </children>
  </HBox>
  <Pane layoutX="573.0" layoutY="46.0" AnchorPane.bottomAnchor="738.0" AnchorPane.leftAnchor="573.0" AnchorPane.rightAnchor="107.0" AnchorPane.topAnchor="46.0">
     <children>
        <ComboBox fx:id="categorycmb" prefHeight="25.0" prefWidth="180.0" />
     </children>
  </Pane>
  <Pane layoutX="110.0" layoutY="108.0" AnchorPane.bottomAnchor="672.0" AnchorPane.leftAnchor="110.0" AnchorPane.rightAnchor="461.0" AnchorPane.topAnchor="108.0">
     <children>
        <ToggleButton fx:id="gamestbutton" layoutX="76.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="@Togglebutton.css" text="Games" AnchorPane.topAnchor="112.0" />
        <ToggleButton fx:id="songstbutton" layoutX="218.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="@Togglebutton.css" text="Songs" AnchorPane.topAnchor="112.0" />
        <ToggleButton fx:id="apptbutton" layoutX="5.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="@Togglebutton.css" text="Apps" AnchorPane.topAnchor="112.0" />
        <ToggleButton fx:id="moviestbutton" layoutX="147.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="@Togglebutton.css" text="Movies" AnchorPane.topAnchor="112.0" />
     </children>
  </Pane>
  <Pane layoutX="92.0" layoutY="44.0" AnchorPane.bottomAnchor="737.0" AnchorPane.leftAnchor="92.0" AnchorPane.rightAnchor="347.0" AnchorPane.topAnchor="44.0">
     <children>

        <TextField fx:id="searchtxt" prefHeight="28.0" prefWidth="421.0" promptText="Search" AnchorPane.bottomAnchor="737.0" AnchorPane.leftAnchor="92.0" AnchorPane.rightAnchor="347.0" AnchorPane.topAnchor="44.0" />
     </children>
  </Pane>
 </children>
</AnchorPane>

FXML代码（上图）分别包含在HBox和VBox中的scrollpane和splitpane。

另外，我想在图像之间留出空间..