Vaadin 10 (Flow) Grid如何为TemplateRenderer添加自定义图片图标

我来帮你搞定这个需求！你已经有了能正常显示数字的TemplateRenderer基础，要加入自定义图标只需要扩展模板标签并绑定对应属性就行，下面是具体实现方案：

1. 基础实现：添加本地自定义图标 #

直接在你的模板字符串里插入<img>标签，再通过withProperty为每个TradeUni对象绑定对应的图标路径：

TemplateRenderer<TradeUni> sizeWithIcon = TemplateRenderer.<TradeUni>of(
    "<div class$=\"[[item.class]]\">" +
        "<img src=\"[[item.iconPath]]\" alt=\"Size Icon\" style=\"margin-right: 8px; vertical-align: middle;\"/>" +
        "[[item.size]]" +
    "</div>"
)
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize)
.withProperty("iconPath", trade -> {
    // 这里可以根据业务逻辑动态返回图标路径
    // 示例：根据size的正负切换箭头图标
    return trade.getSize() > 0 ? "icons/arrow-up.png" : "icons/arrow-down.png";
});

资源放置注意事项 #

把图标文件放在项目的src/main/resources/META-INF/resources/目录下，比如上面示例里的icons文件夹就创建在此路径下，这样Vaadin才能正确加载到图片资源。

2. 更便捷的方案：使用Vaadin内置Lumo图标 #

如果不想自己管理图标文件，可以直接用Vaadin官方的Lumo图标库，用<vaadin-icon>标签实现：

TemplateRenderer<TradeUni> sizeWithLumoIcon = TemplateRenderer.<TradeUni>of(
    "<div class$=\"[[item.class]]\">" +
        "<vaadin-icon icon=\"[[item.iconName]]\" style=\"margin-right: 8px; vertical-align: middle;\"></vaadin-icon>" +
        "[[item.size]]" +
    "</div>"
)
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize)
.withProperty("iconName", trade -> {
    // 使用Lumo图标名称，比如箭头向上/向下
    return trade.getSize() > 0 ? "vaadin:arrow-up" : "vaadin:arrow-down";
});

这种方式无需额外放置图片，直接调用官方图标名称即可，能省去不少资源管理的麻烦。

3. 样式优化（可选） #

如果想让图标和文字的排版更统一美观，可以通过CSS类来全局控制图标样式：

1. 在全局样式文件（比如styles/shared-styles.css）中添加：

.grid-cell-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

2. 修改模板中的标签：

<img class="grid-cell-icon" src="[[item.iconPath]]" alt="Size Icon"/>
<!-- Lumo图标版本 -->
<vaadin-icon class="grid-cell-icon" icon="[[item.iconName]]"></vaadin-icon>

这样所有网格内的图标都会保持一致的大小和间距，视觉效果更整洁。

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