有没有办法让Vaadin的字幕显示在左侧而不使用FormLayout？

Question

有没有办法让Vaadin中的字幕显示在左侧没有使用FormLayout？我加粗了，因为我试图避免这是第一个答案。我知道FormLayout提供了这种能力，但在某些情况下，我需要使用类似GridLayout的内容来生成两列数据（例如，firstname和lastname，开始日期和结束日期等等）上）。

Answer 1

没有简单的方法可以做到这一点，因为每个布局都会为其中的组件生成适当的空间。您可以使用简单的CSS规则轻松更改由布局生成的“框”内的标题和相应组件的顺序，但很难动态确定框的大小 - 这就是布局的作用。我在下图中展示了它：

正如您所看到的，我能够使用此CSS交换标题及其文本字段的顺序：

#your-id .v-caption {
  position: relative !important;
  top: 10px !important;
}

#your-id .your-component {
  top: 0px !important;
  left: 0px !important;
  position: absolute !important;
}

和代码

    GridLayout l = new GridLayout(2,2);
    l.addStyleName("your-id");
    for(int i=0; i<4; i++){
        TextField qq = new TextField();
        qq.setCaption("DuDuDu");
        qq.addStyleName("your-component");
        l.addComponent(qq);
    }

（我在Firefox CSS编辑器中应用了这些规则，因此只有一个插槽已更改） 这是可能的，因为我没有必要改变v-gridlayout-slot的大小。大小是由Vaadin动态生成的，你不能告诉Vaadin“为我的文本字段和标题生成插槽，我想要左/右侧的标题”。

Answer 2

如果您使用GridLayout，您可以为字幕创建其他列并手动管理其外观。

Vaadin Book说：

  

实现标题的另一种方法是使用另一个组件作为标题，通常是Label，TextField或Panel。例如，Label允许使用HTML标记突出显示快捷键或将标题绑定到数据源。 Panel提供了一种在组件周围添加标题和边框的简便方法。

这种方法为您提供了更大的灵活性。因此，值得记住。