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

如果沒有比已設置，過量的空間均勻地在所有分佈組件。

請注意，需要爲此方法定義寬度或高度（取決於方向）以產生任何效果。