如何在Vaadin Flow的FormLayout中将组件保持在同一位置

我想使用FormLayout,其中一个字段是可见的,这取决于另一个字段。有没有一种方法可以保持格式不变,即当另一个组件不可见时,它后面的所有字段都保持在相同的位置。

下面是要复制的代码,以及我想要的与当前行为相比的屏幕截图。本质上,每次选择组合框时,都会使“加入团队的年份”字段不可见。

TextField nameTextField = new TextField("Name");
ComboBox<String> teamComboBox = new ComboBox<>("Team");
DatePicker yearJoinedDatePicker = new DatePicker("Year Joined Team");
TextField moreFieldsTextFields = new TextField("More fields");

FormLayout formLayout = new FormLayout();
formLayout.setWidth("600px");
formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 2, FormLayout.ResponsiveStep.LabelsPosition.TOP));

formLayout.add(nameTextField,
        teamComboBox, yearJoinedDatePicker,
        moreFieldsTextFields);

teamComboBox.setItems(List.of("One", "Two"));
teamComboBox.addValueChangeListener(change -> yearJoinedDatePicker.setVisible(!yearJoinedDatePicker.isVisible()));

formLayout.setColspan(nameTextField, 2);

add(formLayout);

理想情况下,目标是在 yearJoinedTeamDatePicker 组件保持在下方,以便在其设置为不可见时,下方的所有其他组件继续正确对齐。

相反,实际发生的是,场上的所有组件都向左移动,就好像不可见的组件不再是 FormLayout 。意思是 moreFieldsTextField 现在在另一行上,如果为两列设置了所有内容,则每一行都将不正确。我理解这在某些情况下是有意义的,但在 表格式 如果组件不可见,有没有办法保持表单的格式?

例如,如果我将firstname和lastname作为两个并排的字段,它们现在将位于不同的行上,如下所示:

一个非常棘手的解决方案是添加 Span 组件或类似的东西,并使其在 yearJoinedDatePicker 字段是可见的,当它可见时是不可见的。基本上,当它不可见时,用一个空字段来填充它。这是一个棘手的解决方法,但似乎不是一个合适的解决方案。考虑到这一点,如果组件不可见,有没有办法保持格式/布局?