带有状态栏的 Vaadin 14,6 AppLayout？

Posted 2023-04-18

【中文标题】带有状态栏的 Vaadin 14,6 AppLayout？

【英文标题】：Vaadin 14,6 AppLayout with StatusBar?

【发布时间】：2021-09-15 19:02:59

【问题描述】：

我很高兴使用标准Vaadin AppLayout Component 作为我的应用程序的布局起点。现在我收到了添加状态栏的要求。状态栏的宽度必须与导航栏的宽度相同，因此它不能成为“内容”的一部分。

使用默认的 AppLayout 是否可以做到这一点？

【参考方案1】：

最初 AppLayout 旨在接管整个空间，因此它并不真正适用于这个用例。但是，我可以通过这些设置对其进行调整以适应页脚栏。

public class MainLayout extends VerticalLayout implements RouterLayout 
    private AppLayout appLayout = new AppLayout();
    private FlexLayout childWrapper = new FlexLayout();

    public MainLayout() 
        ... setup appLayout ...
        childWrapper.setSizeFull();
        appLayout.setContent(childWrapper);

        HorizontalLayout statusBar = new HorizontalLayout();
        statusBar.setHeight("50px");
        statusBar.setWidth("100%");
        statusBar.add(new Span("Status Bar"));
        statusBar.getElement().getStyle().set("background",
                "var(--lumo-tint-30pct)");
        appLayout.getElement().getStyle().set("width", "100%");
        appLayout.getElement().getStyle().set("height", "500px");
        add(appLayout, statusBar);
        this.expand(appLayout);
    

    @Override
    public void showRouterLayoutContent(HasElement content) 
        childWrapper.getElement().appendChild(content.getElement());
    

如果您对状态栏感兴趣，只需将add(appLayout, statusBar); 切换为add(statusBar, appLayout);

【讨论】：

获得可用的结果（至少对于我的应用程序而言）似乎比 sn-p 建议的代码要复杂一些。首先，RouterLayout 方法需要转发给 AppLayout。但是有一些奇怪的行为：导航侧面板覆盖了状态栏。此外，当屏幕垂直变小时，某些屏幕上的状态栏会消失。我会在周末进一步评估。

如果导航面板仍然覆盖状态栏，则可以选择使用另一个带有 StatusBar 的 ParentLayout 作为 AppLayout 内容并将 AppLayout 保留为最外层组件

> 首先RouterLayout方法需要转发给AppLayout。是的，这很明显，我跳过了那部分，但为了完整起见，现在添加，尽管这是一个不同的问题。