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

Question

例如，如果我的表格有 2 列和 2 行，但想将第 1 列中的第 2 列保留为空，我该怎么做而不添加空值（空 Span）。

-----------------
| 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 的列跨度，使其跨度比一列宽。但是 FormLayout 也是响应式的，因此如果您使浏览器变窄，它会重排字段。空组件会使它看起来很奇怪，因为不太可能按照您的意愿放置。

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

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

理论上您可以调整响应步长，使布局更加严格。

我假设 Div 组件，其中您根据您想要实现的目标设置 css-grid 样式可能比 FormLayout 在这种情况下。

How do I add empty spaces in FormLayout in Vaadin Flow?