本文介紹了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。
這篇關于Vaadin-無法使組件居中-設計問題的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,