Vaadin 14中grid.setItems在propertyChange方法中失效问题

核心原因 #

当你使用grid.setItems(list)传入普通ArrayList时，Vaadin默认创建的ListDataProvider不会监听该List的结构变化（比如新增、删除元素）。调用refreshAll()仅会刷新已有数据的显示状态，无法触发Grid加载List中新添加的元素。

解决方案 #

方案1：改用ObservableList（推荐） #

Vaadin的ObservableList会自动监听集合的结构变化，并通知数据提供者更新Grid，无需手动调用刷新方法。

修改GridClass中的集合定义：

// 替换原ArrayList为ObservableList
List<HandlerTest> list = ObservableList.create();

需导入包：com.vaadin.flow.data.binder.ObservableList;

修改后的完整GridClass代码：

package org.vaadin.example;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.binder.ObservableList;
import com.vaadin.flow.router.Route;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import java.util.List;

@Route("grid")
public final class GridClass extends VerticalLayout implements PropertyChangeListener {
    HandlerTest ht = new HandlerTest();
    List<HandlerTest> list = ObservableList.create();
    Grid<HandlerTest> grid = new Grid<>();

    public GridClass() {
        grid.addColumn(HandlerTest::getPattern).setHeader("Pattern");
        grid.addColumn(HandlerTest::getModuleName).setHeader("Module");

        grid.setItems(list);
        grid.setAllRowsVisible(true);
        grid.setHeight("480px");
        add(grid);
    }

    @Override
    public void propertyChange(PropertyChangeEvent evt) {
        HandlerTest newHandler = (HandlerTest) evt.getNewValue();
        ht = newHandler;

        list.add(ht);
        Notification.show("Value of obj :" + evt.getNewValue());
        // 无需手动调用refreshAll，ObservableList会自动通知Grid更新
    }
}

方案2：每次添加元素后重新设置Items #

如果不想替换集合类型，可在添加元素后重新调用grid.setItems(list)，强制Grid重新加载整个集合数据：

修改propertyChange方法：

@Override
public void propertyChange(PropertyChangeEvent evt) {
    HandlerTest newHandler = (HandlerTest) evt.getNewValue();
    ht = newHandler;

    list.add(ht);
    Notification.show("Value of obj :" + evt.getNewValue());
    // 重新设置Items，让Grid加载更新后的List
    grid.setItems(list);
}

补充说明 #

构造函数中调用grid.setItems(list)有效，是因为此时Grid会一次性加载List初始化时的所有元素；但后续List新增元素时，普通ArrayList不会主动通知Grid，导致Grid无法感知到新元素的存在。

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