日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

本文介紹了Vaadin-無法使組件居中-設(shè)計問題的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

我不熟悉CSS，不幸的是我沒有太多時間來研究這個問題，所以我選擇了內(nèi)置Vaadin ValoTheme。

我有一個帶有兩個對象的垂直布局-標(biāo)簽和面板，這兩個組件都應(yīng)該居中。這就是我想要相信的：

不幸的是，在無數(shù)次嘗試模仿之后，我得到了這個

我的代碼：

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

    }
}

我做錯了什么？我不能完全理解如何正確設(shè)計布局(在提出這個問題之前，我閱讀了Vaadin書)

注意：“ComponentHelper”用于創(chuàng)建具有最小ValoTheme樣式的對象。

感謝您的建議

update：歡迎使用setSizeUnfined()的結(jié)果；

更新2：已修改@qtdzz代碼以重現(xiàn)問題：

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

推薦答案

在我看來，如果將歡迎標(biāo)簽放在Form Layout內(nèi)并為其設(shè)置對齊方式會更容易。

這是我的建議，希望能有所幫助：

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：根據(jù)您的代碼和我的理解，一種解決方案可以用以下方式解釋。如果加上”Text1″、”歡迎”和”Panel”，則如下圖所示：

因此，要使它們居中對齊，我們需要將”text1″和”panel”的expandRatio設(shè)置為0.5，將”歡迎”設(shè)置為0。然后將”Text1″設(shè)置為Alignment.BOTTOM_Center，將”Welcome”設(shè)置為Alignment.MIDDLE_Center，將”Panel”設(shè)置為Alignment.TOP_Center，并將toLoginPage按鈕設(shè)置為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();
}

順便說一句，我覺得上面的解決方案真的很難維護(hù)和理解(例如，如果您想要添加另一個文本，您必須將其添加到Text1和Welcome之間)。我推薦的解決方案是使用一個包裝器布局(垂直布局)來包裝所有組件，并將其設(shè)置為基本布局的中間_中心。此問題的解決方案是：

 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。

這篇關(guān)于Vaadin-無法使組件居中-設(shè)計問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，