VisionX ERP系统工作屏响应式适配实现求助

针对你遇到的小窗口下工作屏显示问题，以下是基于VisionX（底层基于Vaadin）的响应式布局实现方案，替换你之前的组件resize监听逻辑即可：

核心思路 #

放弃监听组件自身的resize事件，改为监听浏览器窗口的resize事件，根据窗口宽度阈值（比如1024px）动态调整表格列可见性和编辑器布局方向。

完整代码示例 #

在你的工作屏类（如XXXWorkscreen.java）的init()方法中添加以下代码：

@Override
protected void init() throws Exception {
    super.init();
    
    // 1. 监听浏览器窗口 resize 事件
    Page.getCurrent().addBrowserWindowResizeListener(event -> {
        int windowWidth = event.getWidth();
        adjustResponsiveLayout(windowWidth);
    });

    // 2. 初始化时执行一次布局调整，确保首次加载符合当前窗口尺寸
    adjustResponsiveLayout(Page.getCurrent().getBrowserWindowSize().getWidth());
}

// 响应式布局调整逻辑
private void adjustResponsiveLayout(int windowWidth) {
    boolean isSmallWindow = windowWidth < 1024;

    // --- 调整表格列可见性 ---
    // 替换为你实际使用的表格对象变量名
    YourTableClass table = getTable();
    if (table != null) {
        // 隐藏非核心业务列，示例列名请根据实际修改
        table.getColumn("extRemark").setVisible(!isSmallWindow);
        table.getColumn("createUser").setVisible(!isSmallWindow);
        table.getColumn("updateTime").setVisible(!isSmallWindow);
        // 可继续添加更多列的可见性控制
    }

    // --- 切换编辑器排列方向 ---
    // 替换为你存放编辑器的容器布局变量名（如HorizontalLayout/VerticalLayout）
    Component editorContainer = getEditorLayout();
    if (editorContainer != null && editorContainer.getParent().isPresent()) {
        HasComponents parentLayout = (HasComponents) editorContainer.getParent().get();
        
        if (isSmallWindow) {
            // 小窗口下切换为纵向排列
            if (!(editorContainer instanceof VerticalLayout)) {
                // 保存原有编辑器组件
                List<Component> editors = new ArrayList<>(editorContainer.getChildren());
                parentLayout.remove(editorContainer);
                
                VerticalLayout verticalLayout = new VerticalLayout();
                verticalLayout.setSpacing(true);
                verticalLayout.setSizeFull();
                verticalLayout.add(editors.toArray(new Component[0]));
                
                parentLayout.add(verticalLayout);
                // 更新容器引用为新的纵向布局
                editorContainer = verticalLayout;
            }
        } else {
            // 大窗口下切换为横向排列
            if (!(editorContainer instanceof HorizontalLayout)) {
                List<Component> editors = new ArrayList<>(editorContainer.getChildren());
                parentLayout.remove(editorContainer);
                
                HorizontalLayout horizontalLayout = new HorizontalLayout();
                horizontalLayout.setSpacing(true);
                horizontalLayout.setSizeFull();
                horizontalLayout.add(editors.toArray(new Component[0]));
                
                parentLayout.add(horizontalLayout);
                editorContainer = horizontalLayout;
            }
        }
    }
}

关键说明 #

1. 事件监听替换：你之前使用的launcher.eventComponentResized监听的是Launcher组件自身的尺寸变化，而非浏览器窗口的resize，因此无法触发窗口尺寸变化的逻辑。改用Page.getCurrent().addBrowserWindowResizeListener才能正确捕获窗口尺寸变化。
2. 变量名替换：代码中的YourTableClass、getTable()、getEditorLayout()需要替换为你项目中实际的表格类、表格获取方法和编辑器容器布局获取方法。
3. 自定义阈值：可根据需求调整windowWidth < 1024中的阈值，适配不同屏幕尺寸。
4. 列可见性控制：根据业务优先级选择隐藏非关键列，避免小窗口下表格横向溢出。

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