java - Vaadin布局扩展

使用Vaadin 7，我正在尝试完成与此处提出的其他问题类似的布局，但有一个主要区别：

我希望我的内容布局仅在其中没有足够内容时才填充剩余空间。这将导致如下所示的布局：



我还希望布局能够执行以下操作：

当我添加更多内容时，足以填充内容布局区域，然后继续添加更多内容，页脚将保留在原位，出现滚动条，之后添加的内容将添加到页脚下方。

除了第一张图片之外，添加足够的内容还应导致以下布局：

最佳答案

我不知道我是否正确理解了您的问题，但请尝试尝试我的代码，看看是否有帮助：

    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setSpacing(true);
    layout.setStyleName("flow_visible");
    final HorizontalLayout navBarLayout = new HorizontalLayout();
    final VerticalLayout contentLayout = new VerticalLayout();
    final VerticalLayout spacingLayout = new VerticalLayout();
    final HorizontalLayout footerLayout = new HorizontalLayout();
    String dummyText = "TDummy text";
    navBarLayout.addComponent(new Label("Navigation bar"));
    navBarLayout.setStyleName("navbar");
    navBarLayout.setWidth("100%");

    contentLayout.setSizeFull();
    contentLayout.setSpacing(true);
    Button addButton = new Button("Add more content",
            (Button.ClickListener) clickEvent -> {
                contentLayout.addComponent(new Label(dummyText),
                        contentLayout.getComponentCount() - 2);
            });
    contentLayout.addComponent(addButton);
    for (int i = 0; i < 6; i++) {
        contentLayout.addComponent(new Label(dummyText));
    }
    spacingLayout.setSizeFull();
    contentLayout.addComponent(spacingLayout);
    contentLayout.setExpandRatio(spacingLayout, 1f);

    footerLayout.addComponent(new Label("Footer"));
    footerLayout.setStyleName("footer");
    footerLayout.setWidth("100%");
    contentLayout.addComponent(footerLayout);

    layout.addComponent(navBarLayout);
    layout.addComponent(contentLayout);
    layout.setSizeFull();
    layout.setExpandRatio(contentLayout, 1f);

该代码的工作方式：http://i.imgur.com/1HH1wm7.gif

关于java - Vaadin布局扩展，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41306535/