Vaadin在布局中的组件位置

Question

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

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

除了菜单在屏幕上的位置以外的所有罚款。它看起来未来：

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

Answer 1

单独对齐是不够的。包装垂直布局将保持你的两个项目在每个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：3（33％）为COMPONENT1和2：3（67％）为COMPONENT2：

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

如果没有比已设置，过量的空间均匀地在所有分布组件。

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