Vaadin组件间接继承FormLayout布局配置失效如何修复？

问题根因 #

你自定义组件继承FormLayout后布局失效的核心原因是给子类添加了@Tag("memory-component")/@Tag("graphics-card-component")注解，覆盖了FormLayout默认的<vaadin-form-layout>原生标签。
FormLayout的响应式布局逻辑、配套CSS样式都是针对<vaadin-form-layout>标签实现的，自定义标签没有对应的客户端渲染逻辑和样式，因此就算你调用了setResponsiveSteps方法，也不会生效，所有子元素只会按照普通行内元素默认横向排列。

解决方案 #

直接移除继承FormLayout的自定义组件上的@Tag注解即可，不需要修改其他逻辑。如果你的父类AbstractPcPartCard也添加了自定义@Tag注解，同样要移除，保证组件最终使用的是FormLayout自带的<vaadin-form-layout>标签。

修改后的示例代码如下：

import com.example.application.model.Memory;
import com.vaadin.flow.component.html.Span;

// AbstractPcPartCard extends FormLayout，且未自定义@Tag注解
public class MemoryCard extends AbstractPcPartCard {
    private static final long serialVersionUID = -8954098740536795286L;
    Memory pcPart;

    public MemoryCard(Memory pcPart) {
        this.pcPart = pcPart;

        Span name = new Span(pcPart.getName());
        Span price = new Span(this.getPrice());
        Span stock = new Span(this.getStock());
        Span config = new Span(this.getConfiguration());
        Span form = new Span(this.getFormFactor());
        Span frequency = new Span(this.getFrequency());

        setResponsiveSteps(
            new ResponsiveStep("0", 3),
            new ResponsiveStep("1200px", 6));
        // 直接添加子组件即可，不需要嵌套内部FormLayout
        add(name, price, stock, config, form, frequency);
    }
    // 省略getter方法
}

补充说明 #

你之前嵌套FormLayout的方案能生效，是因为内部实例化的new FormLayout()使用的是默认的<vaadin-form-layout>标签，布局逻辑不受外层自定义标签的影响。如果确实需要给组件设置自定义标识用于前端样式匹配，可以通过addClassName方法给组件添加自定义CSS类名替代，不要覆盖原生标签。

内容的提问来源于stack exchange，提问作者Dario Viva