Question

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

Drawing of desired button

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

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

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

button.setText("ABC");

我怎样才能保留两者？我不想使用setHtml方法，因为这会创建一个新的HTTP请求

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

Answer 1

有很多方法可以实现这一目标。

请查看以下相同背景下的帖子：

示例代码：

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);

注意：您也可以将其移至CSS并附加到HTML中。

___________-

修改

您可以使用PushButton以及使用setInnerHTML()的{{1}}方法来实现此目标。

ImageResource

现在只需在需要时调用final PushButton pushButton = new PushButton(new Image(Resources.INSTANCE.old_cut_icon())); pushButton.getElement().setInnerHTML("<div><center>"+pushButton.getElement().getInnerHTML()+"</center><label><center>Cut</center></label></div>");即可更改图标。

setImage()

截图

Answer 2

在按钮上设置文字。还设置了CSS样式：

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

根据图像大小调整填充。

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

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

2 个答案: