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

除菜单在屏幕上的位置外，一切都很好。接下来看：

enter image description here

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

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


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

示例如何为component1分配1：3（33％），为component2分配2：3（67％）：

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

如果没有设置比率，则多余的空间在所有组件中均匀分布。

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

使用Vaadin的布局中的组件位置

1 个答案: