gwt - 生成的 HTML 元素之间的空格

Question

我遇到了一个问题，简单但愚蠢的阻塞。

我构建了一个 GWT (Google Web Toolkit) Web HMI。在一个面板中，我创建了一堆 CheckBoxes。每一个都给我一个 span 元素，其中包含 input 复选框及其 label。到目前为止，还不错。

所以我明白了:

<span class="blablabla keepUnited">blabliblu1</span><span class="blablabla keepUnited">blabliblu2</span><span class="blablabla keepUnited">blabliblu3</span><span class="blablabla keepUnited">blabliblu4</span>

在生成的 HTML 代码中，span 元素粘在一起。这弄乱了我所有漂亮的布局!如果我用空格分隔 span 元素，布局很好:

<span class="blablabla keepUnited">blabliblu1</span> <span class="blablabla keepUnited">blabliblu2</span> <span class="blablabla keepUnited">blabliblu3</span> <span class="blablabla keepUnited">blabliblu4</span>

如何插入这些空格？

Answer 1

扩展 FlowPanel 以便它在小部件之间添加内联空间:

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.InlineHTML;
import com.google.gwt.user.client.ui.Widget;

public class MyFlowPanel extends FlowPanel {

  @Override
  public void add(Widget w) {
    if (w != null) {
      if (this.getWidgetCount() > 0) {
        super.add(new InlineHTML(" "));
      }
      super.add(w);
    }
  }

}

以与旧 FlowPanel 相同的方式使用新 FlowPanel:

public class MyMain implements EntryPoint {

  @Override
  public void onModuleLoad() {
    MyFlowPanel myFlowPanel = new MyFlowPanel();

    myFlowPanel.add(new CheckBox("Checkbox 1"));
    myFlowPanel.add(new CheckBox("Checkbox 2"));
    myFlowPanel.add(new CheckBox("Checkbox 3"));
    RootLayoutPanel.get().add(myFlowPanel);
  }

}

结果有空格(为了测试，我使用了竖线“|”而不是空格“”):

不确定空格在 span 内的事实是否会破坏您的交易。真正的版本也应该修改 insert() 方法。另请注意，使用此方法时，您在检查小部件计数或遍历小部件列表时必须小心，因为 MyFlowPanel 正在 secret 注入(inject) InlineHTML 小部件。因此，例如，在您添加两个复选框后，流程面板中就会出现三个小部件。

如果您真的想要花哨的东西，可以向 MyFlowPanel 添加构造函数，在其中指定要在主要元素之间添加的“插页式”字符串、SafeHtml 或 Widget。