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

本文介绍了如何在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更适合您。