Vaadin 14：将应用程序范围内的页脚添加到 AppLayout

Question

我有一个 Vaadin 应用程序，其中 MainLayout 的类型为 AppLayout。我们在此 MainLayout 中定义了一个应用程序范围的导航栏，并且它按预期工作。但是我找不到对页脚执行相同操作的方法。有没有办法向 AppLayout 添加页脚，以便它显示在每个视图的底部？ 我已经尝试过这个解决方案并使用

setContent()

添加页脚，但它没有显示。 如果有办法的话那就太好了，因为手动将其添加到每个视图会有点痛苦。

谢谢！

Answer 1

您始终可以创建一个 RouterLayout，将其与 AppLayout 链接起来，并固定页脚和一些用于路由目标的容器。

喜欢：

@Route("")
@ParentLayout(MainLayout.class) // AppLayout
public class FooterLayout extends VerticalLayout implements RouterLayout {
    
    private Div container = new Div();
    
    private Div footer = new Div();

    public FooterLayout() {
        add(container, footer);
        footer.add(new Text("I'm a fixed footer!"));
    }

    public void showRouterLayoutContent(HasElement content) {
        container.removeAll();
        container.getElement().setChild(0, content.getElement());
    }
}

Answer 2

我刚刚遇到这个线程，并且在 Vaadin 24 上遇到了类似的问题：我想向 Vaadin AppLayout 模板添加页脚。为了做到这一点，利用 AppLayout 的

setContent()

方法是一种有效的方法，与 @mackesmilian 所写的相反：

@Override
public void setContent(final Component content) {
    final Span footerText  = new Span("My Footer text");
    footerText.addClassName(LumoUtility.AlignSelf.CENTER);
    content.getElement().appendChild(footerText.getElement());
    super.setContent(content);
}

这个示例片段在我的应用程序中发挥了作用。如果使用 AfterNavigationObserver 接口的 afterNavigation() 方法，则 setContent 将在路由内容显示之前执行。在这种情况下，它有助于通过使用另一个需要添加的接口（名为

HasUrlParameter

）的

afterNavigation()

在 addComponentAsFirst() 方法中添加内容。

希望这可以帮助正在寻找解决方案的人。