Vaadin Flow中如何在FormLayout中跳过单元格添加空白占位？

适用场景 #

2列2行表单布局，第一行第二列留空，无需添加空Span等无实际意义的占位组件。

推荐实现方式（Vaadin 23.1+版本） #

Vaadin 23.1及以上版本提供了addToRowAPI，可直接指定组件插入的行、列位置，中间空白单元格无需添加任何占位组件：

// 初始化FormLayout并固定为2列布局
FormLayout formLayout = new FormLayout();
formLayout.setResponsiveSteps(new ResponsiveStep("0", 2));

// 直接指定组件的行列位置，行列索引从0开始计数
formLayout.addToRow(0, 0, new TextField("第一行第一列"));
formLayout.addToRow(1, 0, new TextField("第二行第一列"));
formLayout.addToRow(1, 1, new TextField("第二行第二列"));

低版本兼容实现方式（Vaadin 14+通用） #

FormLayout底层基于CSS Grid实现，可以直接给第二行首组件设置网格起始行属性，让它跳过第一行剩余的空单元格：

FormLayout formLayout = new FormLayout();
formLayout.setResponsiveSteps(new ResponsiveStep("0", 2));

TextField firstField = new TextField("第一行第一列");
TextField secondField = new TextField("第二行第一列");
TextField thirdField = new TextField("第二行第二列");

// 强制第二个组件从第二行开始渲染，自动跳过第一行第二列的位置
secondField.getElement().getStyle().set("grid-row-start", "2");

formLayout.add(firstField, secondField, thirdField);

内容的提问来源于stack exchange，提问作者Stephane Grenier