Question

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

我尝试使用

setSizeFull();

在我的主要布局上的

方法，但它看起来like that（即使我将侧边栏高度设置为100％）

我的侧边栏背后有代码：

公共类补充工具栏{

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);
}

如果需要，最后使用Navbar：

公共类NavigationBar {

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％，它将与所有包含的组件共享空间，除非您设置了扩展比率。您可以通过verticalLayout.setExpandRatio(secondComponent, 1.0f)告诉垂直布局为一个组件提供所有空间。这会将你的第一个组件折叠到它需要的房间，并从第一个组件到第一个组件给出第二个组件。

在Vaadin VerticalLayout中，新组件位于中间而不是另一个组件下方

1 个答案: