Question

我想要根据按钮点击交换两张图像

private Image widget1 = new Image("images/AU-wp5.jpg");
private Image widget2 = new Image("images/GB-wp1.jpg");
private boolean flag = false;

private void onClick()
{
    flag = !flag;
    if(flag)
    {                       
        RootPanel.get("stockList").add(widget1);
        RootPanel.get("stockList").remove(widget2);
    }
    else
    {           
        RootPanel.get("stockList").add(widget2);
        RootPanel.get("stockList").remove(widget1);
    }
}

这是在图像之间交换的正确方法吗？我已经阅读过关于拥有一张图片并更改它的网址，但却无法通过这种方式获得工作方式。

Answer 1

如果您确定图像已修复，那么您应该考虑使用GWT的Dev Guided Client Bundle功能来确保最佳的优化和性能。相关章节https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#ImageResource。

它的最佳使用示例是树节点+和 - 符号切换。

http://code.google.com/p/google-web-toolkit/source/search?q=CellTree&origq=CellTree&btnG=Search+Trunk

  public interface BasicResources extends Resources {

    @ImageOptions(flipRtl = true)
    ImageResource cellTreeClosedItem();

    @ImageOptions(flipRtl = true)
    @Source("cellTreeLoadingBasic.gif")
    ImageResource cellTreeLoading();

    @ImageOptions(flipRtl = true)
    ImageResource cellTreeOpenItem();

    /**
     * The styles used in this widget.
     */
    @Source(BasicStyle.DEFAULT_CSS)
    BasicStyle cellTreeStyle();
  }

Answer 2

正如SSR所提到的，你可以通过手机资源来实现，或者你可以选择使用CSS的更简单和推荐的方法。

Button button = new Button ( "Click me" );
private boolean flag = true;
button.addClickHandler ( new ClickHandler() 
{
     public void OnClick()
     {
             b.setStyleName( "my-button-clicked-" + flag );
             flag = !flag;
     }
}

您的CSS可能如下所示

.my-button-clicked-true{
 background : url ( // image path )
}

.my-button-clicked-false{
 background : url ( // image path )
}

有没有更好的方法来改变背景图像

2 个答案: