基于Vaadin与Spring，用List实现带增删改的邮箱地址展示

嘿，我来帮你搞定这个需求！你想要实现点击「Add Email」后，把邮箱地址和编辑、删除按钮按照Phone的样式用List展示对吧？咱们一步步调整代码来实现：

第一步：定义单个邮箱条目组件 #

首先要先写一个能展示单条邮箱+操作按钮的布局，就像Phone的每个条目那样：

// 单个邮箱条目：包含邮箱文本、编辑、删除按钮
private Component buildEmailItem(String email) {
    HorizontalLayout itemLayout = new HorizontalLayout();
    itemLayout.setSpacing(true);
    itemLayout.setAlignItems(Alignment.CENTER);
    itemLayout.setWidthFull();

    // 显示邮箱地址的标签
    Label emailLabel = new Label(email);
    emailLabel.setWidth("100%"); // 让标签占满剩余空间，把按钮挤到右边
    itemLayout.addComponent(emailLabel);

    // 编辑按钮逻辑
    Button editBtn = new Button("Edit");
    editBtn.addClickListener(e -> {
        // 打开编辑弹窗，和添加弹窗逻辑类似，记得回显当前邮箱
        PersonWindow editDialog = new PersonWindow("Edit Email", new DialogWindowListener<Person>() {
            @Override
            public void dialogConfirmed(Person updatedPerson) {
                // 更新用户的邮箱（如果支持多邮箱，这里要替换对应条目）
                person.setEmail(updatedPerson.getEmail());
                refreshEmailList();
            }

            @Override
            public void dialogClosed(boolean confirmed) {}
        });
        // 假设你的PersonWindow有方法可以设置初始邮箱值
        // editDialog.setInitialEmail(email);
        CcptUI.getCurrent().addWindow(editDialog);
    });
    itemLayout.addComponent(editBtn);

    // 删除按钮逻辑
    Button deleteBtn = new Button("Delete");
    deleteBtn.addClickListener(e -> {
        // 移除该邮箱（多邮箱场景下要从列表里删除对应项）
        person.setEmail(null);
        refreshEmailList();
    });
    itemLayout.addComponent(deleteBtn);

    return itemLayout;
}

第二步：重构邮箱布局，改用List组件承载条目 #

把原来的GridLayout换成Vaadin的List组件（如果是旧版Vaadin，用VerticalLayout也可以，核心是动态渲染条目），调整你的createEmailLayout方法：

private VerticalLayout emailLayout;
private List<Component> emailList; // 用来存放所有邮箱条目

private void createEmailLayout() {
    emailLayout = new VerticalLayout();
    emailLayout.setMargin(false);
    emailLayout.setSpacing(true);

    // 初始化邮箱列表组件
    emailList = new List<>();
    emailList.setWidthFull();

    // 添加邮箱按钮
    Button addEmailBtn = new Button("Add Email");
    addEmailBtn.addClickListener(e -> {
        PersonWindow addDialog = new PersonWindow("Add Email", new DialogWindowListener<Person>() {
            @Override
            public void dialogConfirmed(Person newPerson) {
                // 如果要支持多邮箱，建议把Person类的email字段改成List<String>
                // 比如 person.getEmails().add(newPerson.getEmail());
                person.setEmail(newPerson.getEmail());
                refreshEmailList();
            }

            @Override
            public void dialogClosed(boolean confirmed) {}
        });
        CcptUI.getCurrent().addWindow(addDialog);
    });

    emailLayout.addComponents(emailList, addEmailBtn);
    // 初始化时刷新一次列表
    refreshEmailList();
}

第三步：实现刷新列表的方法 #

每次添加、编辑、删除邮箱后，调用这个方法更新List的内容：

private void refreshEmailList() {
    emailList.removeAllComponents(); // 清空旧内容

    // 获取当前邮箱（多邮箱场景下改成遍历List<String>）
    String currentEmail = person.getEmail();
    if (currentEmail != null && !currentEmail.isBlank()) {
        Component emailItem = buildEmailItem(currentEmail);
        emailList.addComponent(emailItem);
    }

    // 多邮箱场景的写法：
    // for (String email : person.getEmails()) {
    //     Component emailItem = buildEmailItem(email);
    //     emailList.addComponent(emailItem);
    // }
}

小提示 #

如果你需要支持多个邮箱地址，记得把Person类里的email字段从String改成List<String>，这样每次点击「Add Email」都会新增一条，而不是覆盖原有内容。同时弹窗的逻辑也要对应调整，确保能正确处理列表的增删改。

内容的提问来源于stack exchange，提问作者AlfaBet