java - 使用 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) after 将菜单添加到布局来执行此操作。这将告诉 Vaadin 在布局中提供菜单 100%。

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

This method is used to control how excess space in layout is distributed among components. Excess space may exist if layout is sized and contained non relatively sized components don't consume all available space.

Example how to distribute 1:3 (33%) for component1 and 2:3 (67%) for component2 :

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

If no ratios have been set, the excess space is distributed evenly among all components.

Note, that width or height (depending on orientation) needs to be defined for this method to have any effect.