java - ScrollPane 中的 GridPane

Question

我将 GridPane 包装在 ScrollPane 中，以便在将新行添加到网格时能够滚动它。

<BorderPane fx:id="SubmitStageBorderPane" 
stylesheets="@../SubmitStageStyles.css" 
xmlns="http://javafx.com/javafx/8.0.112-ea" 
xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.SubmitStage">
   <center>
  <AnchorPane fx:id="SubmitStageAnchorPane">
     <children>
        <ScrollPane fx:id="GridscPane" hbarPolicy="NEVER" vbarPolicy="ALWAYS">
           <content>
              <GridPane fx:id="submitLayout" maxHeight="1080.0" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="700.0" stylesheets="@../SubmitStageStyles.css">
                <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 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 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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                </rowConstraints>
                 <children>
                    <TextField fx:id="course1" promptText="Course name" GridPane.rowIndex="1">
                       <opaqueInsets>
                          <Insets />
                       </opaqueInsets>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="course2" promptText="Cource name" GridPane.rowIndex="2">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="course3" promptText="Course name" GridPane.rowIndex="3">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="course4" promptText="Course name" GridPane.rowIndex="4">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="1">
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="2">
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="3">
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="4">
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                    </Label>
                    <TextField fx:id="grade1" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="1">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="grade2" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="2">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="grade3" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="3">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="grade4" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="4">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="1">
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="2">
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="3">
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                    </Label>
                    <Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="4">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                       <padding>
                          <Insets bottom="10.0" left="10.0" right="15.0" top="10.0" />
                       </padding>
                       <font>
                          <Font name="Eras Demi ITC" size="21.0" />
                       </font>
                    </Label>
                    <TextField fx:id="credit1" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="1">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="credit2" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="2">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="credit3" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="3">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                    <TextField fx:id="credit4" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="4">
                       <GridPane.margin>
                          <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                       </GridPane.margin>
                    </TextField>
                 </children>
                 <opaqueInsets>
                    <Insets />
                   </opaqueInsets>
                 <padding>
                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                 </padding>
              </GridPane>
           </content>
        </ScrollPane>
        <Button fx:id="AddAnotherCourseButton" alignment="BOTTOM_CENTER" mnemonicParsing="false" onAction="#AddAnotherCourseClicked" text="ADD ANOTHER COURSE">
           <font>
              <Font name="Book Antiqua Bold" size="15.0" />
           </font>
        </Button>
     </children>
  </AnchorPane>
</center>
<top>
  <MenuBar fx:id="SubmitStageMenuBar" BorderPane.alignment="CENTER">
    <menus>
        <Menu mnemonicParsing="false" text="File">
          <items>
            <MenuItem mnemonicParsing="false" text="Save" />
              <MenuItem mnemonicParsing="false" text="Load" />
              <SeparatorMenuItem mnemonicParsing="false" />
              <MenuItem mnemonicParsing="false" text="Exit" />
          </items>
        </Menu>
        <Menu mnemonicParsing="false" text="About">
          <items>
            <MenuItem mnemonicParsing="false" text="Action 1" />
          </items>
        </Menu>
    </menus>
  </MenuBar>
</top>
</BorderPane>

我有一个按钮，每当单击它时，就会将包含元素的行添加到 GridPane 中。

public void AddAnotherCourseClicked(){

    int rowCount = returnMaxRow();

    TextField courseName = new TextField();
    courseName.setPromptText("Course name");
    submitLayout.setMargin(courseName, new Insets(5, 5, 5, 5));

    Label gradeLabel = new Label("Grade:");
    gradeLabel.setFont(Font.font("Eras Demi ITC", 21));
    submitLayout.setMargin(gradeLabel, new Insets(5, 5, 5, 5));
    gradeLabel.setPadding(new Insets(10, 10, 15, 10));

    TextField gradeReceived = new TextField();
    gradeReceived.setPromptText("Enter the grade");
    submitLayout.setMargin(gradeReceived, new Insets(5, 5, 5, 5));

    Label creditsLabel = new Label("Credits:");
    creditsLabel.setFont(Font.font("Eras Demi ITC", 21));
    submitLayout.setMargin(gradeLabel, new Insets(5, 5, 5, 5));
    creditsLabel.setPadding(new Insets(10, 10, 15, 10));

    TextField courseCredit = new TextField();
    courseCredit.setPromptText("Course credit");
    submitLayout.setMargin(courseCredit, new Insets(5, 5, 5, 5));

    submitLayout.addRow(rowCount+1, courseName, gradeLabel, gradeReceived, creditsLabel, courseCredit);
}

private int returnMaxRow(){
    int rowNum, lastRow = 0;
    for(Node element : submitLayout.getChildren()){
        rowNum = submitLayout.getRowIndex(element);
        lastRow = (rowNum > lastRow ? rowNum : lastRow);
    }
    return lastRow;
}

到目前为止，ScrollBar 已添加，但是，当我按下按钮时，行只是聚集在一起，并且 ScrollBar 不会扩展，其高度保持不变。

Answer 1

我遇到了同样的问题..到处寻找...终于有一种方法了..

只是不要使用场景生成器添加网格 Pane ...只需使用场景生成器创建滚动 Pane ，然后使用代码动态添加网格 Pane ，如下所示

// create new constraints for columns and set their percentage
ColumnConstraints columnConstraints = new ColumnConstraints();
columnConstraints.setHgrow(Priority.NEVER);
columnConstraints.setPercentWidth(100.00);

// create new constraints for row and set their percentage
RowConstraints rowConstraints = new RowConstraints();
rowConstraints.setVgrow(Priority.NEVER);

columnConstraints.setPercentWidth(100.0);

// don't set preferred size or anything on gridpane
GridPane gridPane = new GridPane();  
gridPane.getRowConstraints().add(rowConstraints);
gridPane.getColumnConstraints().add(columnConstraints);

// suppose your scroll pane id is scrollPane
scrollPane.setContent(gridPane);

最后，在场景构建器中，请记住为滚动 Pane 勾选 FitHeight 和 FitWidth，以便在移动中添加网格时，网格 Pane 将拉伸(stretch)以适合滚动 Pane 大小