Vaadin 13.0.4 Flow：如何为FormLayout响应式步骤添加自定义方法

在Vaadin 13.0.4 Flow中，FormLayout的响应式切换是基于客户端CSS媒体查询实现的，框架本身并没有直接提供服务端的切换事件回调。不过我们可以通过客户端监听+服务端通信的方式来实现需求，下面是两种可靠的实现方案：

方案一：使用自定义客户端事件触发服务端逻辑 #

这种方式通过在客户端监听窗口resize事件，当检测到跨越你的断点（1010px）时，触发自定义事件传递给服务端，服务端监听该事件并执行自定义代码。

完整代码示例 #

@Route
public class ResponsiveFormView extends VerticalLayout {

    public ResponsiveFormView() {
        FormLayout formLayout = new FormLayout();
        // 初始化你的响应式步骤配置
        formLayout.setResponsiveSteps(
                new FormLayout.ResponsiveStep("0", 1, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                new FormLayout.ResponsiveStep("1010px", 2)
        );

        // 添加测试表单组件
        formLayout.add(new TextField("用户名"), new TextField("邮箱"),
                       new TextField("电话"), new TextField("地址"));

        // 监听客户端自定义的响应式切换事件
        formLayout.getElement().addEventListener("responsive-step-changed", event -> {
            // 获取客户端传递的状态数据
            boolean isNarrow = event.getEventData().getBoolean("event.detail.isNarrow");
            int currentWidth = event.getEventData().getInteger("event.detail.width");
            
            // 执行你的自定义逻辑
            handleLayoutSwitch(isNarrow, currentWidth);
        }).setEventData("event.detail");

        // 注入客户端JS代码，监听resize并触发事件
        formLayout.getElement().executeJs("""
                let previousIsNarrow = window.innerWidth < 1010;
                const formElement = this;
                let resizeTimeout;

                // 防抖函数，避免resize频繁触发
                function checkLayoutChange() {
                    clearTimeout(resizeTimeout);
                    resizeTimeout = setTimeout(() => {
                        const currentIsNarrow = window.innerWidth < 1010;
                        if (currentIsNarrow !== previousIsNarrow) {
                            previousIsNarrow = currentIsNarrow;
                            // 触发自定义事件传递给服务端
                            formElement.dispatchEvent(new CustomEvent('responsive-step-changed', {
                                detail: {
                                    isNarrow: currentIsNarrow,
                                    width: window.innerWidth
                                }
                            }));
                        }
                    }, 100); // 100ms防抖延迟，可按需调整
                }

                // 绑定resize监听
                window.addEventListener('resize', checkLayoutChange);
                // 初始加载时检查一次状态
                checkLayoutChange();
                // 组件销毁时清理监听器，防止内存泄漏
                formElement.addEventListener('detach', () => {
                    window.removeEventListener('resize', checkLayoutChange);
                    clearTimeout(resizeTimeout);
                });
                """);

        add(formLayout);
    }

    private void handleLayoutSwitch(boolean isSingleColumn, int windowWidth) {
        // 这里写你的自定义业务逻辑
        String message = isSingleColumn 
            ? "已切换为1列布局（窗口宽度：" + windowWidth + "px）" 
            : "已切换为2列布局（窗口宽度：" + windowWidth + "px）";
        Notification.show(message, 3000, Notification.Position.TOP_CENTER);
        
        // 比如调整组件样式、加载数据等操作
        // yourCustomBusinessCode();
    }
}

方案二：使用@ClientCallable直接调用服务端方法 #

这种方式更简洁，通过客户端JS直接调用服务端标注了@ClientCallable的方法，传递状态参数。

完整代码示例 #

@Route
public class ResponsiveFormView extends VerticalLayout {

    public ResponsiveFormView() {
        FormLayout formLayout = new FormLayout();
        formLayout.setResponsiveSteps(
                new FormLayout.ResponsiveStep("0", 1, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                new FormLayout.ResponsiveStep("1010px", 2)
        );

        formLayout.add(new TextField("Field 1"), new TextField("Field 2"),
                       new TextField("Field 3"), new TextField("Field 4"));

        // 注入客户端JS代码，调用服务端方法
        formLayout.getElement().executeJs("""
                let previousIsNarrow = window.innerWidth < 1010;
                const form = this;
                let resizeTimeout;

                function checkResize() {
                    clearTimeout(resizeTimeout);
                    resizeTimeout = setTimeout(() => {
                        const currentIsNarrow = window.innerWidth < 1010;
                        if (currentIsNarrow !== previousIsNarrow) {
                            previousIsNarrow = currentIsNarrow;
                            // 直接调用服务端的@ClientCallable方法
                            $0.callServer('onLayoutResponsiveSwitch', currentIsNarrow, window.innerWidth);
                        }
                    }, 100);
                }

                window.addEventListener('resize', checkResize);
                checkResize();
                form.addEventListener('detach', () => {
                    window.removeEventListener('resize', checkResize);
                    clearTimeout(resizeTimeout);
                });
                """, formLayout);

        add(formLayout);
    }

    // 标注为客户端可调用的方法
    @ClientCallable
    public void onLayoutResponsiveSwitch(boolean isSingleColumn, int windowWidth) {
        // 执行自定义逻辑
        Notification.show(
            isSingleColumn ? "切换到1列布局" : "切换到2列布局",
            2000,
            Notification.Position.BOTTOM_END
        );
        // 你的其他自定义代码
        // adjustComponentVisibility(isSingleColumn);
    }
}

关键注意点 #

1. 防抖处理：窗口resize事件会频繁触发，添加防抖函数可以避免不必要的服务端调用，提升性能。
2. 内存泄漏防护：在组件从DOM中移除时，一定要清理resize监听器和定时器，避免内存泄漏。
3. 断点匹配：客户端判断的宽度（1010px）要和你设置的ResponsiveStep断点完全一致，确保逻辑同步。

内容的提问来源于stack exchange，提问作者Nejc Zagrušovcem