在Vaadin 23中使用PNG文件自定义按钮图标

一、先把图标资源放对位置 #

把你的两个PNG文件（比如btn-normal.png、btn-success.png）放到项目的src/main/resources/META-INF/resources/icons目录下——没有这个目录就手动建一个，Vaadin会自动识别这个路径下的静态资源。

二、创建带自定义图标的按钮 #

有两种简单的方式加载本地PNG作为图标：

方式1：直接用Icon组件指定资源路径 #

// 初始化按钮，设置初始状态图标
Button customBtn = new Button();
Icon initialIcon = new Icon("icons", "btn-normal.png");
customBtn.setIcon(initialIcon);

这里的"icons"对应我们创建的资源目录，Vaadin会自动拼接路径找到你的PNG文件。

方式2：用ThemeResource更灵活引用 #

如果需要处理不同环境的资源路径，也可以用ThemeResource：

ThemeResource initialRes = new ThemeResource("icons/btn-normal.png");
Icon initialIcon = new Icon(initialRes);
customBtn.setIcon(initialIcon);

三、实现点击成功后切换图标 #

给按钮加点击事件，在业务操作成功后替换图标就行：

customBtn.addClickListener(e -> {
    // 这里写你的实际业务逻辑，比如调用接口、处理数据
    boolean operationSuccess = true; // 这里换成你真实的操作结果判断
    if (operationSuccess) {
        // 切换为成功状态的图标
        Icon successIcon = new Icon("icons", "btn-success.png");
        customBtn.setIcon(successIcon);
        // 可选：如果不想让用户重复点击，直接禁用按钮
        customBtn.setEnabled(false);
    }
});

四、快速预览Vaadin预设图标 #

不想查无预览的文档？直接在项目里搞个临时预览：

VerticalLayout iconPreview = new VerticalLayout();
// 遍历所有Vaadin预设图标，生成带名称的预览行
for (VaadinIcon icon : VaadinIcon.values()) {
    HorizontalLayout row = new HorizontalLayout();
    row.add(new Icon(icon), new Label(icon.name()));
    iconPreview.add(row);
}
// 把这个preview布局加到任意测试视图里，启动项目就能看到所有图标和对应名称

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