JavaFx，FXML，如何自动调整内容大小：根据其父项的Button，StackPane，Field，Scrollpane

Question

I am trying to design a Java application using Fxml (SceneBuilder), the problem I am facing right now is that, I am not able to auto resize contents, ScrollPane according to GridPane (1,2) row 1, StackPane according to GridPane row 2 and Button and Textfield according to pane. Is there any property which can help me or any alternative solution?

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>

<AnchorPane id="ClientItemMainAnchorPane" fx:id="ClientItem_anchorPane1" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <StackPane fx:id="ClientItem_stackPane1" prefHeight="600.0" prefWidth="800.0" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <children>
            <GridPane fx:id="ClientItem_gridPane" >
              <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints maxHeight="517.0" minHeight="10.0" prefHeight="435.0" vgrow="SOMETIMES" />
                <RowConstraints maxHeight="294.0" minHeight="10.0" prefHeight="165.0" vgrow="SOMETIMES" />
              </rowConstraints>
               <children>
                  <ScrollPane fx:id="ClientItem_scrollPane" prefHeight="417.0" prefWidth="800.0">
                     <content>
                        <AnchorPane fx:id="ClientItem_AnchorPane2" prefHeight="396.0" prefWidth="736.0">
                           <children>
                              <TableView fx:id="ClientItem_tableView" layoutX="14.0" layoutY="14.0" prefHeight="382.0" prefWidth="768.0">
                                <columns>
                                  <TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="66.0" text="Client No." />
                                  <TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="188.0" text="Name" />
                                    <TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0" text="Address" />
                                    <TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
                                    <TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0" text="Remaining" />
                                    <TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="87.0" text="Type" />
                                </columns>
                              </TableView>
                           </children>
                        </AnchorPane>
                     </content>
                  </ScrollPane>
                  <StackPane fx:id="ClientItem_StackPane2" prefHeight="150.0" prefWidth="200.0" GridPane.rowIndex="1">
                     <children>
                        <Pane fx:id="ClientItem_Pane" prefHeight="200.0" prefWidth="200.0">
                           <children>
                              <TextField fx:id="ClientItem_textField_ClientNo" layoutX="14.0" layoutY="42.0" prefHeight="25.0" prefWidth="69.0" />
                              <TextField fx:id="ClientItem_textField_Name" layoutX="80.0" layoutY="42.0" prefHeight="25.0" prefWidth="188.0" />
                              <TextField fx:id="ClientItem_textField_Remaining" layoutX="596.0" layoutY="42.0" prefHeight="25.0" prefWidth="95.0" />
                              <TextField fx:id="ClientItem_textField_Type" layoutX="691.0" layoutY="42.0" prefHeight="25.0" prefWidth="87.0" />
                              <TextField fx:id="ClientItem_textField_Address" layoutX="268.0" layoutY="42.0" prefHeight="25.0" prefWidth="220.0" />
                              <TextField fx:id="ClientItem_textField_Phone" layoutX="488.0" layoutY="42.0" prefHeight="25.0" prefWidth="108.0" />
                              <Label alignment="CENTER" layoutX="22.0" layoutY="14.0" text="Client No." />
                              <Label alignment="CENTER" contentDisplay="TOP" layoutX="158.0" layoutY="14.0" text="Name" />
                              <Label alignment="CENTER" layoutX="357.0" layoutY="14.0" text="Address" />
                              <Label alignment="CENTER" layoutX="525.0" layoutY="14.0" text="Phone" />
                              <Label alignment="CENTER" layoutX="615.0" layoutY="14.0" text="Remaining" />
                              <Label alignment="CENTER" layoutX="722.0" layoutY="14.0" text="Type" />
                              <Button fx:id="ClientItem_btn_Add" layoutX="307.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Add" />
                              <Button fx:id="ClientItem_btn_Delete" layoutX="425.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Delete" />
                           </children>
                        </Pane>
                     </children>
                  </StackPane>
               </children>
            </GridPane>
         </children>
      </StackPane>
   </children>
</AnchorPane>

Answer 1

I'm not sure if you're intentionally wrapping your content into multiple panes, but it is unnecessary. Panes will not autoresize its content and AnchorPanes will only resize content if you call AnchorPane.setTopAnchor(Node) , AnchorPane.setRightAnchor(Node) , AnchorPane.setBottomAnchor(Node) , or AnchorPane.setLeftAnchor(Node) .

First, the GridPane. You can set the VGrow and HGrow properties of the RowConstraints and ColumnConstraints , respectively, to resize the content in relation to the GridPane's size. Setting the percentHeight and percentWidth of the RowConstraints and ColumnConstraints will also aid in keeping the rows and columns at their preferred proportions.

On the ScrollPane, set the fitToWidth and fitToHeight properties to keep its children resized to match the size of the ScrollPane.

For your input area, an HBox would be much better suited than a Pane so that you can more easily resize the textfields and buttons. Setting each Label's graphic to its corresponding textfield will also help keep the two together.

Here is your fxml code cleaned up to give you a better idea.

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


<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane fx:id="ClientItem_gridPane" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65"
      xmlns:fx="http://javafx.com/fxml/1">
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="73.0" prefHeight="435.0"
                    vgrow="ALWAYS" />
        <RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="10.0"
                    prefHeight="65.0" />
        <RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="17.0"
                    prefHeight="100.0" />
    </rowConstraints>
    <children>
        <ScrollPane fx:id="ClientItem_scrollPane" fitToHeight="true" fitToWidth="true" prefHeight="417.0"
                prefWidth="800.0" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER"
                GridPane.vgrow="ALWAYS">
            <content>
            <TableView fx:id="ClientItem_tableView" prefHeight="409.0" prefWidth="778.0">
                    <columns>
                        <TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="103.0" text="Client No." />
                        <TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="151.0" text="Name" />
                        <TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0"
                                 text="Address" />
                        <TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
                        <TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0"
                                 text="Remaining" />
                        <TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="102.0" text="Type" />
                    </columns>
                </TableView>
            </content>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </ScrollPane>
        <HBox alignment="CENTER" prefHeight="77.0" prefWidth="800.0" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1"
          GridPane.vgrow="ALWAYS">
            <children>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Client No.">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_ClientNo" prefHeight="25.0" prefWidth="69.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Name">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Name" prefHeight="25.0" prefWidth="188.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Address">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Address" prefHeight="25.0" prefWidth="220.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Phone">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Phone" prefHeight="25.0" prefWidth="108.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Remaining">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Remaining" prefHeight="25.0" prefWidth="95.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Type">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Type" prefHeight="25.0" prefWidth="87.0" />
                    </graphic>
                </Label>
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </HBox>
        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="20.0" GridPane.hgrow="ALWAYS"
          GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
            <children>
                <Button fx:id="ClientItem_btn_Add" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
                    text="Add" />
                <Button fx:id="ClientItem_btn_Delete" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
                    text="Delete" />
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </HBox>
    </children>
</GridPane>