如何创建同时包含图像和文本的GWT按钮？

我正在尝试创建一个GWT按钮，其中包括图像和文本，如下所示：

我可以这样创建和设置按钮图像：

PushButton button = new PushButton();
button.getUpFace().setImage(new Image(icon));

但如果我这样做，图像就会消失：

button.setText("ABC");

我怎么能两者兼得？我不希望使用setHtml方法，因为那样会创建一个新的HTTP请求

---

编辑：调用setHTML（）的问题在于，它会导致浏览器向服务器发送另一个HTTP请求。这意味着，当我更改图标时，按钮会空白一两秒钟，而浏览器会等待服务器的响应—显然这并不理想。我正在寻找一种方法来使用内存中以ImageResource对象形式存在的图像。谢谢

在按钮上设置文本。还要设置CSS样式：

.myButton {
    background-image:url('/images/icon/cut.png');
    background-position:center top;
    padding: 28px 2px 2px;
}

根据图像的大小调整填充

---

另一种方法是创建一个将按钮与标签组合在一起的小部件，然后（1）将它们放在布局面板中，指定所需的位置，或者（2）使用CSS将标签移动到按钮顶部（更好）。

实现这一点的方法很多

请看以下在相同背景下提出的问题：

示例代码：

Button button = new Button();

// get image form CSS resource
String url = new Image(Resources.INSTANCE.cut()).getUrl();
// get image from url
String url = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/edit-cut-64.png";
// get image from the project war/images folder
String url = GWT.getHostPageBaseURL() + "images/cut.png";

String html = "<div><center><img src = '" + url
        + "'></img></center><label>Cut</label></br></div>";

button.setHTML(html);

现在只要在需要更改图标时调用

setImage（）

pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));

截图

---

这种方法的问题在于，它取代了GWT使用的背景图像，在按钮上产生了细微的渐变效果，并更新了响应（您没有提到渐变）。如果你的文本不是动态的，那么在Photoshop中创建一个结合图标和文本的图像可能会更容易。谢谢-这会产生正确的布局，但意味着当图像更改时，按钮会空白一两秒钟（请参见上面的编辑）@Mark share your code。你到底在做什么？下面是我试图做的：注意，每当“Draw”按钮图标被更改时，它会有一小段时间是空的。现在我的代码就是：button.getUpFace（）.setHTML（“
”+label）@马克：好的，我现在明白了，你想说的。

pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));