Vaadin Flow中FormLayout隐藏组件时如何保持其余控件位置不变

Vaadin 组件的setVisible(false)方法会直接将元素从DOM树中移除，而FormLayout底层基于CSS Grid实现，布局计算时会忽略不存在的元素，因此后续组件会自动前移填充空位，导致排版错乱。

方案1：修改visibility样式（最简实现） #

不用setVisible()控制显隐，改为修改visibilityCSS属性，该属性隐藏元素时会保留原有布局空间，仅对用户不可见：

teamComboBox.addValueChangeListener(change -> {
    // 可根据业务逻辑调整显隐判断条件
    boolean needHide = yearJoinedDatePicker.getStyle().get("visibility") == null;
    if (needHide) {
        yearJoinedDatePicker.getStyle().set("visibility", "hidden");
        yearJoinedDatePicker.setEnabled(false); // 隐藏时禁用交互，避免误操作
    } else {
        yearJoinedDatePicker.getStyle().remove("visibility");
        yearJoinedDatePicker.setEnabled(true);
    }
});

方案2：控制FormItem（适配带标签场景） #

如果需要连组件对应的表单标签一起保留占位，建议显式创建FormLayout.FormItem包裹目标组件，直接控制FormItem的可见性即可：

// 替换原来直接add yearJoinedDatePicker的逻辑
FormItem yearJoinedItem = formLayout.addFormItem(yearJoinedDatePicker, "Year Joined Team");

// 显隐控制逻辑
teamComboBox.addValueChangeListener(change -> {
    boolean needHide = yearJoinedItem.getStyle().get("visibility") == null;
    if (needHide) {
        yearJoinedItem.getStyle().set("visibility", "hidden");
        yearJoinedItem.setEnabled(false);
    } else {
        yearJoinedItem.getStyle().remove("visibility");
        yearJoinedItem.setEnabled(true);
    }
});

以上两种方案均不需要额外添加占位组件，属于Vaadin原生支持的实现方式，不会破坏原有colspan和响应式布局规则。

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