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

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

java - Vaadin布局扩展-LMLPHP

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

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

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

java - Vaadin布局扩展-LMLPHP

最佳答案

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

    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/

10-17 02:29