JavaFX Динамический пользовательский интерфейс поля формы

Question

Кто-нибудь знает, как имитировать функциональность компонентов UI, показанных ниже?Я хочу повторить добавление полей формы при вводе текста в поле TextField.Мне не нужна выпадающая кнопка, только динамическое добавление форм.

Answer 1

Вы можете изменить дочерние элементы GridPane, добавляя новые TextField & Button каждый раз, когда активируется одна из кнопок.Прослушайте свойства text, чтобы включить / отключить Button и сохранить результаты.

private static void insertRow(GridPane grid, List<String> values, int index) {
    // increment index of children with rowIndex >= index
    for (Node n : grid.getChildren()) {
        int row = GridPane.getRowIndex(n);
        if (row >= index) {
            GridPane.setRowIndex(n, row + 1);
        }
    }

    TextField text = new TextField();

    Button add = new Button("+");
    add.setDisable(true);
    add.setOnAction(evt -> {
        insertRow(grid, values, GridPane.getRowIndex(add) + 1);
    });

    values.add(index, "");

    text.textProperty().addListener((a, oldValue, newValue) -> {
        add.setDisable(newValue.isEmpty());
        values.set(GridPane.getRowIndex(add), newValue);
    });

    grid.addRow(index, text, add);
}

@Override
public void start(Stage primaryStage) throws Exception {
    GridPane grid = new GridPane();
    List<String> list = new ArrayList<>();
    insertRow(grid, list, 0);
    Button print = new Button("print");
    print.setOnAction(evt -> {
        System.out.println(list);
    });
    grid.add(print, 0, 1);
    Scene scene = new Scene(grid, 300, 500);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 2

Это может быть не совсем то, что вы ищете, и, возможно, не лучший способ сделать это, но должно быть легко адаптировать его к вашим потребностям.

По сути, вам понадобится списокHBox объекты для добавления к VBox в вашем приложении.Вы можете создать список самостоятельно и связать его с дочерними элементами вашего VBox или просто добавить / удалить HBox es в / из VBox, используя методы getChildren().add() и getChildren().remove().

Вот небольшое приложение для демонстрации концепции.Я создал внутренний класс для обработки HBox с нужными полями.Это может быть адаптировано для большей гибкости:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    private static VBox mainPane;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        mainPane = new VBox(5);
        mainPane.setPadding(new Insets(10));
        mainPane.setAlignment(Pos.TOP_CENTER);

        mainPane.getChildren().add(new UIForms());

        primaryStage.setScene(new Scene(mainPane));
        primaryStage.show();

    }

    static void addField() {
        mainPane.getChildren().add(new UIForms());
    }

    static void removeField(UIForms field) {
        if (mainPane.getChildren().size() > 1) {
            mainPane.getChildren().remove(field);
        }
    }
}

class UIForms extends HBox {

    private TextField textField1;
    private TextField textField2;

    private Button btnAddField;
    private Button btnRemoveField;

    public UIForms() {

        // Setup the HBox layout
        setAlignment(Pos.CENTER_LEFT);
        setSpacing(5);

        // Create the UI controls
        textField1 = new TextField();
        textField2 = new TextField();
        btnAddField = new Button("+");
        btnRemoveField = new Button("-");

        // Setup button actions
        btnAddField.setOnAction(e -> Main.addField());
        btnRemoveField.setOnAction(e -> Main.removeField(this));

        // Add the UI controls
        getChildren().addAll(
                textField1, textField2, btnAddField, btnRemoveField
        );
    }
}