文本上方带有图标的GWT自定义按钮

我想创建一个带有图标和文本的按钮，其中图标位于文本上方

寻找信息我找到了这个

使用它，我创建了自己的SquareButton类，如下所示：

import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Image;

/**
 * Square Button class
 * @author julio.palma.vazquez
 *
 */
public class SquareButton extends Button {

    /** Text to show. */
    private String text;

    /**
     * Constructor.
     */
    public SquareButton() {
        super();
    }

    public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) {
        super(text, clickHandler);
        setResource(imageResource);
        setPixelSize(60, 60);
    }

    /**
     * Set image resource.
     * @param imageResource image resource
     */
    public void setResource(ImageResource imageResource){
        Image img = new Image(imageResource);
        String definedStyles = img.getElement().getAttribute("style");
        img.getElement().setAttribute("style", definedStyles + "; vertical-align:top;");
        DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
    }

    /**
     * Set text.
     * @param text text to show
     */
    @Override
    public void setText(String text) {
        this.text = text;
        Element span = DOM.createElement("span");
        span.setInnerText(text);
        span.setAttribute("style", "vertical-align:bottom; text-align: center;");

        DOM.insertChild(getElement(), span, 0);
   }

   /**
    * Get text.
    * @return text to show
    */
   @Override
   public String getText() {
       return this.text;
   }
}

不幸的是，它并没有像我期望的那样工作，并在图像上方输出文本

---

您能帮我一下吗？

您可以在按钮中设置HTML。您可以尝试以下操作：

Button button = new Button();
String html = "<div><center><img src = '"+GWT.getModuleBaseURL()+"/images/img1.png' height = '10px' width = '10px'></img></center><label>Text</label></br></div>";
button.setHTML(html);

按钮按钮=新按钮（）；
字符串html=“Text
”；
setHTML（html）；

---

为按钮和图像指定适当的大小。

您可以在按钮中设置HTML。您可以尝试以下操作：

Button button = new Button();
String html = "<div><center><img src = '"+GWT.getModuleBaseURL()+"/images/img1.png' height = '10px' width = '10px'></img></center><label>Text</label></br></div>";
button.setHTML(html);

按钮按钮=新按钮（）；
字符串html=“Text
”；
setHTML（html）；

---

为您的按钮和图像提供适当的大小。

您可以在下面看到SquareButton类，感谢您的帮助

import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Button;

/**
 * Square Button class
 * @author julio.palma.vazquez
 *
 */
public class SquareButton extends Button {

    public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) {
        super();
        String html = "<div><center><img src = '" +     imageResource.getSafeUri().asString() + "' height = '32px' width = '32px'></img></center><label>" + text + "</label></br></div>";
        addClickHandler(clickHandler);
        setHTML(html);
        setPixelSize(60, 60);
    }
}

import com.google.gwt.event.dom.client.ClickHandler；
导入com.google.gwt.resources.client.ImageResource；
导入com.google.gwt.user.client.ui.Button；
/**
*方形按钮类
*@作者julio.palma.vazquez
*
*/
公共类SquareButton扩展按钮{
public SquareButton（字符串文本、ClickHandler ClickHandler、ImageResource ImageResource）{
超级（）；
字符串html=“”+文本+”
”；
addClickHandler（clickHandler）；
setHTML（html）；
setPixelSize（60,60）；
}
}

您可以在下面看到SquareButton类，感谢您的帮助

import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Button;

/**
 * Square Button class
 * @author julio.palma.vazquez
 *
 */
public class SquareButton extends Button {

    public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) {
        super();
        String html = "<div><center><img src = '" +     imageResource.getSafeUri().asString() + "' height = '32px' width = '32px'></img></center><label>" + text + "</label></br></div>";
        addClickHandler(clickHandler);
        setHTML(html);
        setPixelSize(60, 60);
    }
}

import com.google.gwt.event.dom.client.ClickHandler；
导入com.google.gwt.resources.client.ImageResource；
导入com.google.gwt.user.client.ui.Button；
/**
*方形按钮类
*@作者julio.palma.vazquez
*
*/
公共类SquareButton扩展按钮{
public SquareButton（字符串文本、ClickHandler ClickHandler、ImageResource ImageResource）{
超级（）；
字符串html=“”+文本+”
”；
addClickHandler（clickHandler）；
setHTML（html）；
setPixelSize（60,60）；
}
}

您不需要自定义按钮。您可以通过GWT按钮、ImageResource和CSS来实现这一点。 诀窍是正确设置填充。比如说,

Button btnHelp=new Button("Help");
btnHelp.setStyleName("buttonImageText");
// Separate style for each image resource
btnHelp.addStyleName("bgImageHelp");

在样式表中： （注意：填充顶部至少与图像高度一样大。）

您还在CSS文件中定义了：

@url helpUrl help;

最后，在资源类中，您定义了：

@Source("resources/images/help.png");
ImageResource help();

---

您不需要自定义按钮。您可以通过GWT按钮、ImageResource和CSS来实现这一点。 诀窍是正确设置填充。比如说,

Button btnHelp=new Button("Help");
btnHelp.setStyleName("buttonImageText");
// Separate style for each image resource
btnHelp.addStyleName("bgImageHelp");

在样式表中： （注意：填充顶部至少与图像高度一样大。）

您还在CSS文件中定义了：

@url helpUrl help;

最后，在资源类中，您定义了：

@Source("resources/images/help.png");
ImageResource help();

---

@如果答案对你有帮助，那就接受它。如果这是一个很好的答案，也要投票支持它。@restalion，如果这个答案对你有帮助，那么就接受它。如果这是一个很好的答案，也要投票表决。