Fatal编程技术网
  • java/
  • Java Vaadin-无法将组件居中-设计问题

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

java vaadin

Java Vaadin-无法将组件居中-设计问题,java,vaadin,Java,Vaadin,我不熟悉css，不幸的是我没有太多的时间来研究它，所以我选择了内置Vaadin ValoTheme 我有一个垂直布局，有两个对象-标签和面板，两个组件都应该居中。这就是我想要证明的： 不幸的是，在无数次尝试制作simlar之后，我得到了这个 我的代码： public class SplashScreen extends VerticalLayout implements View { private static final int PANEL_WIDTH = 320; private s


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

我有一个垂直布局，有两个对象-标签和面板，两个组件都应该居中。这就是我想要证明的：

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

我的代码：

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

    }
}
我做错了什么？我不能完全理解如何正确地设计布局（在问这个问题之前，我读了瓦丁的书）

注意：“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();
}
在我看来，如果您将欢迎标签放在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();
}
以下是上述代码的屏幕截图：

更新1:根据您的代码，据我所知，一种解决方案可以用以下方式解释。如果您在其中添加“text1”、“welcome”和“panel”，它将看起来像下面的图片： 因此，为了使它们对齐中间中心，我们需要将“text1”和“panel”的expandRatio设置为0.5，将“welcome”设置为0。然后，将“text1”设置为对齐。底部居中，将“欢迎”设置为对齐。中间居中，将“面板”设置为对齐。顶部居中，将toLoginPage按钮设置为对齐。顶部居中。然后视图将如下图所示： 上图的代码：

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中，它将自动对齐中间位置。

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

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();
以下是我的建议，希望能有所帮助：

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();
}
以下是上述代码的屏幕截图：

更新1:根据您的代码，据我所知，一种解决方案可以用以下方式解释。如果您在其中添加“text1”、“welcome”和“panel”，它将看起来像下面的图片： 因此，为了使它们对齐中间中心，我们需要将“text1”和“panel”的expandRatio设置为0.5，将“welcome”设置为0。然后，将“text1”设置为对齐。底部居中，将“欢迎”设置为对齐。中间居中，将“面板”设置为对齐。顶部居中，将toLoginPage按钮设置为对齐。顶部居中。然后视图将如下图所示： 上图的代码：

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中，它将自动对齐中间位置

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();
我希望这有帮助。：-）

我希望这有帮助。：-）

welcome.setSizeUndefined（）
应该进行对齐work@cfrick提供了屏幕截图。
welcome.setSizeUndefined（）
应进行对齐work@cfrick提供了截图。谢谢你的建议，效果非常好。花了一段时间来摆弄它。您的示例演示了如何将标签添加到面板上。这很好，但是如果我必须在面板上方再做一个标签，我该怎么做呢？（你看，修改你的示例时，布局保持不变（居中），但在布局上添加每个新对象后，对象之间会产生巨大的间隙。需要你的建议。请参阅标记为“更新2:”的代码以完全理解我的问题。[@qtdz]请加入我在这里的对话：@Reborn我根据您的关注更新了答案。希望它能有所帮助：）谢谢您的建议，它非常有效。花了一段时间来摆弄它。您的示例演示了如何将标签添加到面板上。这很好，但是如果我必须在面板上方再做一个标签，我该怎么做呢？（你看，修改你的示例时，布局保持不变（居中），但在布局上添加每个新对象后，对象之间会产生巨大的间隙。需要你的建议。请参阅标记为“更新2:”的代码以完全理解我的问题。[@qtdz]请加入我的对话：@Reborn我根据您的关注更新了答案。希望对您有所帮助：）