新组件放置在中间而不是在 Vaadin VerticalLayout 中另一个组件的下方

Question

我在 Vaadin 中的侧边栏菜单有问题，我的导航栏高度为 50 像素。我希望放置将占用屏幕其余部分的侧边栏（目前只是带按钮的 VerticalLayout）。问题是当我将侧边栏添加到主布局时，它从屏幕中间开始， like this:

我尝试使用

setSizeFull();

我的主要布局上的方法，但它看起来 like that（即使我将侧边栏高度设置为 100%）

我的侧边栏后面有代码：

public class 边栏 {

private VerticalLayout sidebar;
private Button menuItem01;
private Button menuItem02 = new Button("Item02");

//Create Sidebar
public VerticalLayout initSidebar() {
    sidebar = new VerticalLayout();
    sidebar.setWidth("10%");
    sidebar.setHeight("100%");
    sidebar.setMargin(false);
    sidebar.addComponent(createMenuItem());
    sidebar.addComponent(menuItem02);
    sidebar.addStyleName("sidebar");
    return sidebar;
}

public Button createMenuItem(){
    menuItem01 = new Button("Item01");
    return menuItem01;
}

}

我的 MainView 后面有代码

@Override
protected void init(VaadinRequest vaadinRequest) {
    template.setMargin(false);
    template.setSpacing(false);
    //template.setSizeFull();

    //Place all elements together
    template.addComponent(navigationBar.initNavigationBar());
    //template.addComponent(mainContent.initMainPanel());
    template.addComponent(sidebar.initSidebar());

    this.setContent(template);
}

如果需要，最后是导航栏：

public class 导航栏 {

private HorizontalLayout navbar;
private Button hamburgerButton;
private Label logo;

//Create Navigation Bar
public HorizontalLayout initNavigationBar() {
    navbar = new HorizontalLayout();
    navbar.setWidth("100%");
    navbar.setMargin(true);
    navbar.setHeight(50, Sizeable.Unit.PIXELS);
    navbar.addComponent(createHamburgerButton());
    navbar.addComponent(createLogo());
    navbar.addStyleName("navigation-bar");
    return navbar;
}

//Create Hamburger Button
public Button createHamburgerButton() {
    hamburgerButton = new Button();

    //Added some styling to hamburger button
    hamburgerButton.addStyleName("hamburger-button");
    hamburgerButton.setIcon(VaadinIcons.MENU);

    return hamburgerButton;
}

//Create ElenX logo
public Label createLogo() {
    logo = new Label("ElenX");
    logo.addStyleName("elenx-logo");
    logo.setWidthUndefined();
    logo.setEnabled(false);
    return logo;
}
}

有什么想法吗？

Answer 1

如果 VerticalLayout 的高度为 100%，它将与所有包含的组件平等地共享 space，除非您设置展开比率。您可以通过 verticalLayout.setExpandRatio(secondComponent, 1.0f) 告诉垂直布局将所有空间都分配给一个组件。这会将您的第一个组件折叠到它需要的空间，并为第二个组件提供从第一个到底部的所有内容。

新组件放置在中间而不是在 Vaadin VerticalLayout 中另一个组件的下方

New component is placed in the middle instead below another one in Vaadin VerticalLayout

vaadin

vaadin7