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

2022-03-17 00:00:00 java vaadin


我不熟悉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样式的对象。

感谢您的建议

update:欢迎使用setSizeUnfined()的结果;

更新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();
}

解决方案

在我看来,如果将欢迎标签放在Form Layout内并为其设置对齐方式会更容易。

这是我的建议,希望能有所帮助:

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"、"欢迎"和"Panel",则如下图所示: 因此,要使它们居中对齐,我们需要将"text1"和"panel"的expandRatio设置为0.5,将"欢迎"设置为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之间)。我推荐的解决方案是使用一个包装器布局(垂直布局)来包装所有组件,并将其设置为基本布局的中间_中心。此问题的解决方案是:

 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中,它将自动对齐MIDENT_CENTER。

相关文章