gwt - 如何修改 Image 对象的位置？

Question

在 GWT 中，如何设置 Image 对象添加到 Panel 后的位置？似乎没有设置图像顶部和左侧位置的方法。我们是否必须从面板中删除图像并使用所需的 left 和 top 值再次添加它？最好的方法是什么？

Answer 1

如果你设置绝对位置，你可以

int top = myPanel.getAbsoluteTop();
int left = myPanel.getAbsoluteLeft();
myImage.getElement().getStyle().setTop(top + 100, Unit.PX);
myImage.getElement().getStyle().setLeft(left + 100, Unit.PX); 

或者，您可以在图像上设置“位置：相对”样式。然后你可以在图像上设置“top”和“left”，它会相对于它的父元素定位自己。

Answer 2

从您提出问题的方式来看，我假设您正在尝试使用 GWT，就像使用 Java 中的 Swing 或 SWT 一样。这不是 GWT 的使用方式，并且在大多数情况下会导致非常糟糕的代码和非常糟糕的项目。

GWT 不是隐藏浏览器。所以如果你想改变一个元素的位置，你主要是用 CSS 来做的。

只需将两个 css 类添加到您的项目中

.before{
  position: relative;
  top: 0px;
  left: 0px;
}

.after{
  position: relative;
  top: 100px;
  left: 100px;
}

首先给你的形象第一类：

image.addStyleName("before");

然后：

image.addStyleName("after");

如果你真的需要动态地做这个（一些计算的大小）你可以设置元素的样式属性：

image.getElement().getStyle().setLeft(value, Unit.PX); 
image.getElement().getStyle().setTop(value, Unit.PX);

Answer 3

我所做的只是：

absolutePanel.setWidgetPosition(myImage, newXvalue, newYvalue);

假设“myImage”是absolutePanel 的孩子。