提问者:小点点

删除添加的按钮Vaadin


我有一个按钮。对于用户在文本字段中设置的每个数字,适当数量的按钮会添加到用户界面。但是对于数字的每一次更改,我希望所有按钮都被删除,但不是第一个,已经到位。我该怎么做?当我尝试它时,它不起作用,就像在exmaple中一样:

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按钮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);
            }
        }
    }
}

我错过了什么?


共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();
    }

匿名用户

我会为要删除/添加的按钮创建一个单独的布局持有者并使用它。出于测试目的,我将您的XdevButton替换为通用的VaadinButton类。这似乎符合您的规格:

@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中创建,但在所有其他版本中应该类似