GridLayout - 在内容中填充所有可用 space

Question

我正在 Vaadin 框架中开发一个 Web 应用程序，它有主页和几个子页面。我想要实现的是固定页眉和页脚，并且在中心有内容，正在更改并填充页眉和页脚之间的所有 space。这是我的 MainUI class:

// HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Panel headerPanel = new Panel();
headerPanel.addStyleName("header");

final ActiveLink header = new ActiveLink(provider.getText(getLocale(), "application.title.name"), new ExternalResource(""));
header.addStyleName("header");
header.addListener((ActiveLink.LinkActivatedListener) (ActiveLink.LinkActivatedEvent event) -> {
    getUI().getNavigator().navigateTo(Constant.View.MAIN);
});

headerPanel.setContent(header);
headerLayout.addComponent(headerPanel);

// FOOTER
final VerticalLayout footerLayout = new VerticalLayout(new Label("« FOOTER »"));

// CONTENT
final VerticalLayout contentLayout = new VerticalLayout();

final Panel contentPanel = new Panel(contentLayout);
contentPanel.addStyleName("content transparent no-border");

// MAIN = all together
final VerticalLayout mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(contentPanel, 1);
setContent(mainLayout);

// Register Views in navigator
navigator = new Navigator(this, contentPanel);
navigator.addView("", new MainView(provider));
navigator.addView(Constant.View.DICT_ADMIN, new DictAdminView(provider));

为了更改内容的视图，我在 MainView 中使用 Navigator class:

final ActiveLink link11 = new ActiveLink(provider.getText(getLocale(), "menu.links.dict.admin"), new ExternalResource(""));
link11.addStyleName("menulinks");
link11.addListener((LinkActivatedListener) (LinkActivatedEvent event1) -> {
    getUI().getNavigator().navigateTo(Constant.View.DICT_ADMIN);
});

最后这是我的 DictAdminView class:

public class DictAdminView extends GridLayout implements View {

    private static final Logger LOGGER = LoggerFactory.getLogger(DictAdminView.class);
    I18NProvider provider;
    private final DictionaryDao dictionaryDao = new DictionaryDao();
    private final TermDao termDao = new TermDao();
    private final JPAContainer dictionaries = dictionaryDao.getContainer();
    private final JPAContainer terms = termDao.getContainer();

    public DictAdminView(I18NProvider provider) {
        super(4, 6);
        this.provider = provider;
    }

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {
        removeAllComponents();
        this.addStyleName("dictAdminLayout");
        this.setSizeFull();
        this.setSpacing(true);

        // Table with Dictionaries
        Grid grid = new Grid(dictionaries);
        grid.setId("dictList");
        grid.setWidth("100%");
        grid.setColumns(
            grid.getColumns().get(1).getPropertyId(),
            grid.getColumns().get(0).getPropertyId());
        grid.getColumns().get(1).setWidth(80).setHeaderCaption("POS");
        this.addComponent(grid, 0, 0, 0, 5);
        dictionaries.sort(new Object[]{grid.getColumns().get(0).getPropertyId()}, new boolean[]{true});

        // Table with Terms
        Grid grid1 = new Grid(terms);
        grid1.setId("termList");
        grid1.setWidth("100%");
        grid1.setColumns(
            grid1.getColumns().get(5).getPropertyId(),
            grid1.getColumns().get(0).getPropertyId());
        this.addComponent(grid1, 1, 0, 3, 3);
        terms.sort(new Object[]{grid1.getColumns().get(0).getPropertyId()}, new boolean[]{true});
        terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default

        this.addComponent(new Button("lol button"), 1, 5, 3, 5);

        // Handle dictionary selection
        grid.addSelectionListener(selectionEvent -> {
        // Get selection from the selection model
            Integer selectedDictionaryId = (Integer) ((SingleSelectionModel) grid.getSelectionModel()).getSelectedRow();

            terms.removeAllContainerFilters();

            if (selectedDictionaryId != null) {
                terms.addContainerFilter(new Compare.Equal("dictionaryId.id", selectedDictionaryId));
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.dictionary.selected"),
                            grid.getContainerDataSource().getItem(selectedDictionaryId).getItemProperty("name").toString());
            }
            else {
                terms.addContainerFilter(new IsNull("dictionaryId"));   // show items w/o dict by default
                Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.nothing.selected"), "");
            }
        });
    }
}

我的问题是我无法拉伸 Grid 以填充页眉和页脚之间的所有 space。我试过 setSizeFull() 和 setRowExtendRatio() 的组合，但没有成功。我也尝试在 CSS.

中做到这一点

有没有办法在 Java 或 CSS 中拉伸网格？
Navigator 和更改 View 是一个好方法还是有更好的方法来切换内容？

Answer 1

解决方案是使用 Vaadin 附加组件 BorderLayout 或内置 CustomLayout 以及自己的 HTML 和 CSS.

GridLayout - 在内容中填充所有可用 space

GridLayout - fill all available space in content

vaadin

vaadin7