Vaadin Grid未使用LUMO主题时如何实现通用交替行颜色效果

你之前使用的List.indexOf方案仅支持List类型的数据源，且存在重复元素索引匹配错误、查询性能低下的问题，以下提供两种兼容所有Collection类型的通用实现： #

方案1：无需修改实体类（适配无重复元素场景） #

通过Vaadin官方提供的DataProvider统一封装所有Collection类型的数据源，直接从DataProvider维护的有序条目列表中获取行索引：

// 任意类型的Collection数据源，支持Set、Queue、List等所有JDK集合类型
Collection<你的实体类> yourCollection = 你的业务数据源;

// 用DataProvider统一封装集合，内部自动维护有序的条目序列
ListDataProvider<你的实体类> dataProvider = DataProvider.ofCollection(yourCollection);
grid.setDataProvider(dataProvider);

// 行类名生成逻辑，不受原集合类型影响
grid.setClassNameGenerator(item -> {
    int rowIndex = dataProvider.getItems().indexOf(item);
    return rowIndex % 2 == 0 ? "even-row" : "odd-row";
});

该方案同时兼容Grid的排序、过滤、分页操作，索引会跟随数据刷新自动更新。 #

方案2：支持重复元素（最高兼容度场景） #

如果你的数据源中存在相等的重复元素，可以通过包装带索引的中间类彻底规避索引匹配问题：

// 定义带索引的通用包装类，JDK 16+可用record，低版本改成普通类即可
record IndexedItem<T>(int index, T item) {}

// 将任意Collection转为带索引的包装类列表
List<IndexedItem<你的实体类>> indexedItemList = new ArrayList<>();
AtomicInteger indexCounter = new AtomicInteger(0);
你的任意类型Collection.forEach(item -> {
    indexedItemList.add(new IndexedItem<>(indexCounter.getAndIncrement(), item));
});

// Grid泛型指定为包装类
Grid<IndexedItem<你的实体类>> grid = new Grid<>();
grid.setItems(indexedItemList);

// 直接读取预存的索引，无查询开销也不会匹配错误
grid.setClassNameGenerator(indexedItem -> 
    indexedItem.index() % 2 == 0 ? "even-row" : "odd-row"
);

// 定义列时取出原始实体类属性即可
grid.addColumn(indexedItem -> indexedItem.item().get某属性()).setHeader("列名");

配套样式 #

将以下CSS加入你的主题样式文件即可生效：

vaadin-grid .even-row {
    background-color: var(--lumo-contrast-5pct);
}
vaadin-grid .odd-row {
    background-color: var(--lumo-base-color);
}

补充说明 #

如果后续你的场景允许使用LUMO主题变体，直接添加一行配置即可实现交替行颜色，无需自定义任何逻辑：

grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

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