java - Vaadin在布局中的组件位置

我有下一个问题。我想创建带有标题（在页面顶部）和菜单（在页面中心）的页面。有我的代码：

package org.crabar.views;

import com.vaadin.annotations.Theme;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener;
import com.vaadin.ui.*;
import org.crabar.ViewController;

/**
 * Created by Crabar on 01.11.2014.
 */
@Theme("mytheme")
public class StartView extends VerticalLayout implements View {

    public StartView() {
        setSizeFull();
        setMargin(true);
        createTitle();
        createMenu();
    }

    private void createMenu() {
        VerticalLayout menu = new VerticalLayout();
        menu.setSpacing(true);
        menu.setWidth(150, Unit.PIXELS);
        menu.setHeightUndefined();
        addComponent(menu);
        setComponentAlignment(menu, Alignment.MIDDLE_CENTER);
        Button startGameButton = new Button("Start game", new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                ViewController.getInstance().changeView(ViewController.GAME_VIEW);
            }
        });
        startGameButton.setWidth(100, Unit.PERCENTAGE);
        menu.addComponent(startGameButton);

        Button achievementsButton = new Button("Achievements", new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                //
            }
        });
        achievementsButton.setEnabled(false);
        achievementsButton.setDescription("The achievements will be soon...");
        achievementsButton.setWidth(100, Unit.PERCENTAGE);
        menu.addComponent(achievementsButton);
    }

    private void createTitle() {
        Label label = new Label("Craberoid 2.0");
        label.setStyleName("title-style");
        addComponent(label);
        label.setWidth(null);
        label.setHeight(null);
        setComponentAlignment(label, Alignment.TOP_CENTER);
    }
}

除菜单在屏幕上的位置外，其他都不错。接下来看：



因此它不在屏幕中心，而是在中心和底部之间。我花了几个小时，但没有找到如何将菜单设置在中心，将标题设置在顶部的方法。

最佳答案

仅靠对齐是不够的。包装的垂直布局将使您的两个项目的高度都保持在50％。因此，您必须告诉布局，然后才能扩展内容。将菜单添加到布局后，通过调用setExpandRatio(menu, 1)来执行此操作。这将告诉Vaadin在布局中提供100％的菜单。

来自https://vaadin.com/api/7.3.3/com/vaadin/ui/AbstractOrderedLayout.html#setExpandRatio%28com.vaadin.ui.Component,%20float%29


  此方法用于控制布局中多余的空间如何在组件之间分配。如果调整布局大小并包含非相对大小的组件不会占用所有可用空间，则可能存在多余的空间。
  
  示例如何为组件1分配1：3（33％）和为组件2分配2：3（67％）的示例：

 layout.setExpandRatio(component1, 1);
 layout.setExpandRatio(component2, 2);

  
  如果未设置任何比率，则多余空间将在所有组件之间平均分配。
  
  请注意，此方法必须定义宽度或高度（取决于方向）才能生效。