根据尺寸自动排列gwt按钮

Question

我是GWT的新手，因此需要以下方面的帮助：

我正在使用UIBinder，需要以特殊方式安排带有动态标签的三个gwt按钮（参见附图）。我该怎么做呢？我很感激任何帮助！

Answer 1

正如我在评论中所说的那样，您只需使用额外的CSS样式来安排您的小部件，以便将它们向左浮动。作为GWT容器，有FlowPanel。

CSS：

.yourWidget {
  float: left;
  ..other styles..
}

.container {
  width: 300px;
  overflow: hidden;
}

代码：

YourButtonWidget w1 = new YourButtonWidget("Some long label");
w1.addStyleNames("yourWidget"):
YourButtonWidget w2 = new YourButtonWidget("Label");
w2.addStyleNames("yourWidget"):
YourButtonWidget w3 = new YourButtonWidget("Another Label");
w3.addStyleNames("yourWidget"):

FlowPanel container = new FlowPanel();
container.add(w1);
container.add(w2);
container.add(w3);

显然，您可以将CSS样式集成为代表按钮的窗口小部件的一部分。请记住，您的小部件必须为自己指定宽度，否则float: left;显然无效。

更新： 我刚看完你的上一条评论，因为你必须开发一个算法来调整按钮1和2的宽度以填充所有可用空间容器。 float: left;将继续工作，你只需要计算出按钮的大小。

使用3个按钮很容易（其中button1Width和button2Width是动态的，button3Width是固定的），这里是如何计算最终宽度（从上面继续）：

int containerWidth = container.getElement().getOffsetWidth();
int button1Width = w1.getElement().getOffsetWidth();
int button2Width = w2.getElement().getOffsetWidth();
int button3Width = w3.getElement().getOffsetWidth();

if ( (button1Width + button2Width) > containerWidth ) {
  button1Width = containerWidth;
  if (( button2Width + button3Width ) > containerWidth) {
    button2Width = containerWidth;
  } else {
    button2Width = containerWidth - button3Width;
  }
} else {
  button2Width = containerWidth - button1Width;
}

w1.getElement().getStyle().setWidth(button1Width,Unit.PX);
w2.getElement().getStyle().setWidth(button2Width,Unit.PX);
w3.getElement().getStyle().setWidth(button3Width,Unit.PX);

确保在将所有内容附加到DOM之后进行这些调整，否则宽度将无法显示。