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

Question

我想使用 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

现在位于不同的行，如果所有内容都设置为两列，那么每行都会不正确。我知道这在某些情况下是有意义的，但是在

FormLayout

中，如果组件不可见，有没有办法保持表单格式？

例如，如果我将名字和姓氏作为两个并排字段，它们现在将位于不同的行上，如下所示：

一个非常老套的解决方案是添加一个

Span

组件或类似的东西，并在

yearJoinedDatePicker

字段可见时使其不可见，在可见时使其不可见。当它不可见时，基本上用一个空字段填充它。这是一个很麻烦的解决方法，但它似乎不是一个合适的解决方案。考虑到这一点，如果组件不可见，是否有办法保持格式/布局？

Answer 1

如果您想保留该位置，也许可以使用

setEnabled

将该字段设置为禁用。

我不确定它会如何表现，但你可以尝试使用 CSS

display: none

而不是

setVisibility(false)

。

Answer 2

您想要实现的目标有点违背 FormLayout 的目的。

FormLayout

有 css flex 规则来按行包装元素/组件。因此，如果您切换组件的可见性，行为就会如您所描述的那样。

您可以做的一件事是将“团队”和“加入团队的年份”包装在其中，例如

HorizontalLayout

并设置

formLayout.setColspan(horizontalLayout, 2);

参见我之前关于

FormLayout

的回答https://stackoverflow.com/a/69270190/8962195