Java 瓦丁：使用图像作为按钮

我想用图像作为按钮。我让它工作，但它不是很好，请看一看屏幕截图。正如您所看到的，按钮本身比图像大得多，但我希望它与图像一样大：

实际按钮比图像大。这里的目标是，除了要单击的图像之外，什么都没有。我怎样才能做到这一点？以下是屏幕截图上按钮的代码：

 Button testButton = new Button();
 String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
 testButton.setIcon(new FileResource(new File(basepath + "/VAADIN/themes/mytheme/img/Button.png")));
 loginForm.addComponent(testButton);

我知道

testButton.setStyleName(BaseTheme.BUTTON_LINK)

使按钮不可见，但不幸的是，这并不能调整按钮的大小，只能调整可视性。

它对我有效：

  Button button = new Button();
  button.setStyleName(ValoTheme.BUTTON_LINK);
  button.setIcon(new ClassResource("/images/button-img.jpg"));
  button.addClickListener(e -> System.out.println("click"));

也许你定义了额外的css

也许你的按钮包含在一个固定高度的布局中

还要确保您的按钮没有配置宽度/高度，以便它可以自动将其大小调整为图标图像的大小

您可能会遇到的下一个问题是焦点边界：

另一种方法是使用布局单击侦听器，并通过CSS添加您自己的鼠标悬停/焦点样式

VerticalLayout layout = new VerticalLayout(new Image(null, new ClassResource("/images/test.png")));
layout.addLayoutClickListener(e -> System.out.println("click"));

---

您只需将单击列表添加到图像中，而不必使用按钮

Image image = new Image(null, new ClassResource("/images/button-img.jpg");
image.addClickListener(e -> System.out.println("click"));
image.addStyleName("my-img-button");

为了添加这个css，我使用@Stylesheet注释来添加css

.my-img-button {
cursor: pointer;
}

与瓦丁14：

Image img = new Image("src");
Button testButton = new Button(img);

---

非常简单。

你也可以用一点cssworks来解决这个问题-我可以在这里使用Vaadin的ClickListeners吗？addClickListener（新建ClickListener（）{…}））；这里不起作用。是的，您可以这样做，请注意vaadin有多个ClickListener，您的代码可能仍导入了不同的ClickListener。感谢您的帮助。我将你的答案标记为问题的解决方案。你是对的，这是由一些额外的CSS引起的。我找到了执行此操作的确切属性，但我无法影响或更改它，因为它只出现在由框架生成的style.css中。我无法对CSS文件本身进行更改，但在scss文件中找不到。有什么建议吗？