如何在 Vaadin Flow 的 FormLayout 中添加空格？

Question

例如，如果我有 2 列和 2 行的表单，但想将第 1 列中的第 2 列保持为空，我该如何在不添加空值（空跨度）的情况下执行此操作。

-----------------
| field | empty |
-----------------
| field | field |
-----------------

我现在正在做：

formLayout.add(new TextField("First row and first column"));
formLayout.add(new Span());
formLayout.add(...);
.. and so on.

我可以只做formLayout.add(textField, new Span(), textField, ...)，但无论哪种情况，我的问题是如何让 FormLayout 在初始 TextField 之后跳过第一行中的单元格？

Answer 1

FormLayout 并非用于刚性网格。可以添加空组件，或者Br组件换行，比空Span效果更好。

您还可以调整 FormItem 的 col-span 以使其比列更宽。但是FormLayout 也是响应式的，所以如果你让浏览器变窄，它会重排字段。空组件会使它看起来很奇怪，因为不可能有您想要的位置。

您还可以设置响应步骤来控制是否在不同的浏览器宽度上显示四、三、二、..列：

formLayout.setResponsiveSteps(
       new ResponsiveStep("25em", 1),
       new ResponsiveStep("32em", 2),
       new ResponsiveStep("40em", 3));

理论上你可以调整响应式步骤，让布局更加严格。

我会假设 Div 组件根据您想要实现的目标设置 css-grid 样式在这种情况下可能比 FormLayout 更好地为您服务。