Vaadin - 无法居中组件 - 设计问题答案

【问题标题】：Vaadin - Unable to center components - design issueVaadin - 无法居中组件 - 设计问题
【发布时间】：2017-05-15 22:55:25
【问题描述】：

我对 css 不熟悉，不幸的是我没有太多时间研究这个，所以我选择了内置 Vaadin ValoTheme。

我有一个包含两个对象的垂直布局 - 标签和面板，两个组件都应该居中。这就是我要归档的内容：

不幸的是，在无数次尝试制作类似之后，我得到了这个

我的代码：

public class SplashScreen extends VerticalLayout implements View {

private static final int PANEL_WIDTH = 320;
private static final int PANEL_HEIGHT = 140;
private static final int BUTTON_WIDTH = 270;
private static final int BUTTON_HEIGHT = 70;

private ComponentHelper componentHelper;
private Panel panel;
private VerticalLayout formLayout;
private Label welcome;
private Button toLoginPage;

public SplashScreen() {
    initComponents();
    buildSplashView();
}

protected void initComponents() {
    componentHelper = ComponentHelper.getInstance();
    panel = componentHelper.createPanel("", PANEL_WIDTH, PANEL_HEIGHT);
    welcome = componentHelper.createH3Label("Welcome");
    formLayout = componentHelper.createVerticalLayout();
    toLoginPage = componentHelper.createFriendlyButton("To Login Page", BUTTON_WIDTH, BUTTON_HEIGHT);
    toLoginPage.addClickListener(this::redirect);
}

private void buildSplashView() {
    addComponent(panel);
    addComponent(welcome);
    formLayout.addComponent(toLoginPage);
    formLayout.setComponentAlignment(toLoginPage, Alignment.MIDDLE_CENTER);
    panel.setContent(formLayout);
    panel.setStyleName(ValoTheme.PANEL_BORDERLESS);
    setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
    setHeight(100, Unit.PERCENTAGE);
}

public void redirect(Button.ClickEvent event) {
    try {
        Thread.sleep(Constants.TRANSITION_TIME_DELAY);
        getUI().getNavigator().navigateTo(ViewTokens.SIGNIN);
    } catch (InterruptedException e) {
    }
}

@Override
public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {

    }
}

我做错了什么？我无法完全理解如何正确设计布局（在问这个问题之前，我阅读了 Vaadin 书）

注意：“componentHelper”用于创建具有一些最小 ValoTheme 样式的对象。

感谢您的建议

更新：使用welcome.setSizeUndefined()的结果；

更新 2： 修改 @qtdzz 代码以重现问题：

private void buildSplashView() {
    addComponent(welcome);
    addComponent(text1);
    addComponent(panel);
    setComponentAlignment(welcome, Alignment.MIDDLE_CENTER);
    setComponentAlignment(text1, Alignment.MIDDLE_CENTER);
    setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
    setSizeFull();

    panel.setSizeUndefined();
    panel.setContent(formLayout);
    welcome.setSizeUndefined();
    formLayout.addComponent(toLoginPage);
    formLayout.setComponentAlignment(toLoginPage, Alignment.MIDDLE_CENTER);
    formLayout.setSizeFull();
}

【问题讨论】：

welcome.setSizeUndefined() 应该使对齐工作
@cfrick 提供截图。

标签： java vaadin

【解决方案1】：

在我看来，如果将欢迎标签放在 formLayout 中并为其设置对齐方式会更容易。

这是我的建议，希望对您有所帮助：

private void buildSplashView() {
    addComponent(panel);
    setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
    setSizeFull();

    panel.setContent(formLayout);
    panel.setStyleName(ValoTheme.PANEL_BORDERLESS);

    formLayout.addComponent(welcome);
    welcome.setSizeUndefined();
    formLayout.addComponent(toLoginPage);
    formLayout.setComponentAlignment(toLoginPage, Alignment.MIDDLE_CENTER);
    formLayout.setComponentAlignment(welcome, Alignment.MIDDLE_CENTER);
    formLayout.setSizeFull();
}

以上代码截图如下：

UPDATE1：根据您的代码并根据我的理解，可以通过以下方式解释一种解决方案。如果在其中添加“text1”、“welcome”和“panel”，它将如下图所示：所以为了让它们居中对齐，我们需要将“text1”和“panel”的expandRatio设置为0.5，将“welcome”设置为0。然后让“text1”为Alignment.BOTTOM_CENTER，“welcome”为Alignment.MIDDLE_CENTER，“panel”为Alignment.TOP_CENTER，toLoginPage按钮为Alignment.TOP_CENTER。然后视图将如下所示：上图代码：

private void buildSplashView() {
    addComponent(text1);
    addComponent(welcome);
    addComponent(panel);
    setComponentAlignment(welcome, Alignment.MIDDLE_CENTER);
    setComponentAlignment(text1, Alignment.BOTTOM_CENTER);
    setComponentAlignment(panel, Alignment.TOP_CENTER);
    setSizeFull();
    setExpandRatio(text1,0.5f);
    setExpandRatio(panel,0.5f);

    panel.setSizeUndefined();
    panel.setContent(formLayout);

    welcome.setSizeUndefined();
    text1.setSizeUndefined();

    formLayout.addComponent(toLoginPage);
    formLayout.setComponentAlignment(toLoginPage, Alignment.TOP_CENTER);
    formLayout.setSizeFull();
}

顺便说一句，我觉得上面的解决方案很难维护和理解（例如，如果你想添加另一个文本，你必须在 text1 和 welcome 之间添加它）。我推荐的解决方案是使用一个包装器布局（垂直布局）来包装所有组件并将其设置为基本布局的 middle_center。解决方法是：

 private void buildSplashView() {
    wrapperLayout.addComponent(text1);//wrapperLayout is a vertical Layout
    wrapperLayout.addComponent(welcome);
    wrapperLayout.addComponent(panel);
    wrapperLayout.setComponentAlignment(welcome, Alignment.MIDDLE_CENTER);
    wrapperLayout.setComponentAlignment(text1, Alignment.MIDDLE_CENTER);
    wrapperLayout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

    addComponent(wrapperLayout);
    setComponentAlignment(wrapperLayout, Alignment.MIDDLE_CENTER);
    setSizeFull();

    panel.setSizeUndefined();
    panel.setContent(formLayout);

    welcome.setSizeUndefined();
    text1.setSizeUndefined();

    formLayout.addComponent(toLoginPage);
    formLayout.setComponentAlignment(toLoginPage, Alignment.MIDDLE_CENTER);
    formLayout.setSizeFull();
}

通过这种方式，你可以在wrapperLayout中添加任意组件，它会自动对齐middle_center。

【讨论】：

感谢您的建议，效果很好。花了一段时间来玩弄它。您的示例演示了如何在面板上添加标签。这很好，但如果我必须在面板上方再制作一个标签 - 我该怎么做？（你看，修改你的例子，布局保持原样（居中），但是在布局上添加每个新对象后，它会在对象之间产生巨大的差距。需要你的建议。
请查看标记为“更新 2：”的代码以完全理解我的问题。
[@qtdzz] 请在这里加入我的谈话：chat.stackoverflow.com/rooms/132120/vaadin-layouts
@Reborn 我根据您的担忧更新了答案。希望对您有所帮助:)

【解决方案2】：

VerticalLayout outerVLayout = new VerticalLayout();
outerVLayout.setSizeFull();

VerticalLayout innerVLayout = new VerticalLayout();
innerVLayout.setSizeUndefined();
outerVLayout.addComponent(innerVLayout);
outerVLayout.setComponentAlignment(innerVLayout, Alignment.MIDDLE_CENTER);

//add components to this inner vertical layout
innerVLayout.addComponent(label);
//textfields are fine but, in case of a label, remember to do this: 
label.setSizeUndefined();

我希望它有所帮助。 :-)

【讨论】：