刪除添加的按鈕 Vaadin

Question

我有一個按鈕。 對於用戶在文本字段中設置的每個數字，適當數量的按鈕會添加到 ui。 但是對於數字的每一次更改，我都希望刪除所有 buttonAdded，但不是第一個，它已經到位。 我怎么做？ 當我在示例中嘗試它時它不起作用：

final int number = Integer.parseInt(this.textField.getValue());
    if(number > 1) {
        for(int i = 1; i < number; i++) {
            final XdevButton buttonAdded = new XdevButton("Button " + i);
            this.verticalLayout.removeComponent(buttonAdded);
            this.verticalLayout.addComponent(buttonAdded);
        }
    }

有沒有辦法在我的循環中創建具有已定義組件名稱的新按鈕？ 像這樣： XdevButton button + i = new XdevButton() ？

編輯：（用列表嘗試過） - 不起作用。

private void textField_valueChange(final Property.ValueChangeEvent event) {

    final int number = Integer.parseInt(this.textField.getValue());
    final List<XdevButton> addedButtons = new LinkedList<>();
    for(final XdevButton btn : addedButtons) {
        this.verticalLayout.removeComponent(btn);
    }
    addedButtons.clear();

    if(number > 1) {

        for(int i = 1; i < number; i++) {
            final XdevButton buttonAdded = new XdevButton("Button " + i);
            addedButtons.add(buttonAdded);
            for(final XdevButton btn : addedButtons) {
                this.verticalLayout.addComponent(btn);
            }
        }
    }
}

我錯過了什么？

Answer 1

我將為要刪除/添加的按鈕創建一個單獨的布局支架並使用它。 出於測試目的，我已將您的XdevButton替換為通用 Vaadin Button class。 這似乎根據您的規格工作：

@Route("customView")
public class CustomView extends VerticalLayout {
    VerticalLayout buttonHolder=new VerticalLayout();

    public CustomView (){
        TextField tf=new TextField("Enter amount of buttons");
        tf.addValueChangeListener(event->{
            final int number = Integer.parseInt(event.getValue());
            if(number > 1) {
                buttonHolder.removeAll();
                for(int i = 0; i < number; i++) {
                    final Button buttonAdded = new Button("Button " + i);
                    buttonHolder.add(buttonAdded);
                }
            }
        });
        Button alwaysInPlace=new Button("This button is never removed");
        add(alwaysInPlace);
        add(buttonHolder);
    }
}

示例在 V14 中創建，但在所有其他版本中應類似

Answer 2

這確實行不通，也不可能按照您的要求命名按鈕。

如果您不想重復使用舊按鈕，您有幾個選擇。

如果垂直布局只包含按鈕，或者你知道按鈕之前有多少個組件，你可以通過索引移除它們：

for(int i = 1; i < number; i++) {
    this.verticalLayout.getElement().removeChild(i);
}

您還可以創建一個列表或其他集合來跟蹤按鈕，這樣您也可以重用它們：

private List<Button> buttons = new LinkedList<>();

...

    // Not enough buttons, need to add new ones
    if (number > buttons.size()) {
        for(int i = buttons.size(); i < number; i++) {
            Button buttonAdded = new Button("Button " + i);
            buttons.add(buttonAdded);
        }
    }
    // Too many buttons, remove the extras
    else if (buttons.size() > number) {
        List<Button> buttonsToRemove = buttons.subList(number, buttons.size());
        buttonsToRemove.forEach(verticalLayout::remove);
        buttonsToRemove.clear();
    }