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

问题描述

例如，如果我有2列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之后第一行中的单元格？

推荐答案

FormLayout不用作刚性网格。您可以添加空组件，或添加Br组件以断行，这比添加空组件Span效果更好。

您还可以调整FormItem的列跨度，使其跨度大于一列。但是FormLayout也是有响应的，所以如果您将浏览器变窄，它将重排字段。空组件会使它看起来很奇怪，因为不太可能放置在您想要的位置。

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

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

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

我假设，在这种情况下，根据您想要实现的内容设置css-grid样式的Div组件可能比FormLayout更适合您。

这篇关于如何在Vaadin Flow的FormLayout中添加空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！