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%提供菜单

从

此方法用于控制布局中多余的空间如何分布在组件之间。如果布局的大小和包含的非相对大小的组件不占用所有可用空间，则可能存在多余的空间

示例如何分配组件1的1:3（33%）和组件2的2:3（67%）：

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

如果未设置比率，则多余空间将均匀分布在所有组件之间

请注意，需要定义宽度或高度（取决于方向）才能使此方法产生任何效果