带有文本字段和复选框的动态网格窗格

Question

我正在做一个项目，其中有两个选项卡。在first Tab的用户界面上有一个文本字段和一个按钮。在文本字段中，用户可以写到100之前的任何数字，当他按下按钮Next时，我的应用程序将转到下一个选项卡，在该选项卡上有一个带有三列a、B和C的Gridpane。

所以我想要的是用户将在第一个选项卡的文本字段中输入的任何数字，根据该数字，它应该在第二个选项卡的GridPane中添加相同数量的Textfields、CheckBoxs和Datepicker行。

使用SceneBuilder可以很容易地创建固定大小的Gridpane，然后在其中添加元素并给它们fx:id，但动态地，这很复杂，因为我必须给每个文本字段、复选框和Datepicker分配fx:id，以便检索数据并将其发送到DB。

我应该使用Gridpane还是有任何其他解决方案来实现目标。如果有人能指导我需要做什么，那将是很大的帮助。

Answer 1

不能在fxml文件中使用循环日志。但是，您可以实现一些逻辑来添加指定数量的行。可以使用 元素为各个行创建fxml文件：

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

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.text.Text?>

<GridPane fx:id="root" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.grid.MainController">
    <children>
        <Text text="A"/>
        <Text text="B" GridPane.columnIndex="1"/>
        <Text text="C" GridPane.columnIndex="2"/>
    </children>
</GridPane>

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

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.DatePicker?>

<fx:root type="javafx.scene.layout.GridPane" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.grid.SubController">
    <children>
        <TextField fx:id="text" GridPane.columnIndex="0" GridPane.rowIndex="$rowIndex" />
        <CheckBox fx:id="checkBox" GridPane.columnIndex="1" GridPane.rowIndex="$rowIndex" />
        <DatePicker fx:id="datePicker" GridPane.columnIndex="2" GridPane.rowIndex="$rowIndex" />
    </children>
</fx:root>

public class MainController {

    @FXML
    private GridPane root;

    private final List<SubController> subControllers = new ArrayList<>();

    public void setRowNumber(int rows) throws IOException {
        if (rows < subControllers.size()) {
            // for simplicity only allow the number of rows to grow
            throw new IllegalArgumentException();
        }
        for (int i = subControllers.size(); i < rows; i++) {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("sub.fxml"));

            // add rowIndex to be used from fxml using $rowIndex
            loader.getNamespace().put("rowIndex", subControllers.size() + 1);

            loader.setRoot(root);
            loader.load();
            subControllers.add(loader.getController());
        }
    }

}

public class SubController {
    @FXML
    private TextField text;
    @FXML
    private CheckBox checkBox;
    @FXML
    private DatePicker datePicker;

}

int num = 6;
FXMLLoader loader = new FXMLLoader(getClass().getResource("main.fxml"));
Parent parent = loader.load();
loader.<MainController>getController().setRowNumber(num);

向控制器中添加方法以访问单个元素应该不会太难。

请注意，tableview也值得一看。