瓦丁不正确的对齐

Question

我编写了以下代码.我试图在面板中一个接一个地将这两个文本集中在一起,如下所示:

                            Your name is:
                                  1

谁能告诉我怎么做呢？

谢谢.

码:

        VerticalLayout layout1 = new VerticalLayout();
        layout.setSizeFull();
        layout1.setSizeFull();
        Label label = new Label("Your name is: ");
        label.setStyleName(Runo.LABEL_H1);
        Label label1 = new Label(name);
        label1.setStyleName(Runo.LABEL_H1);
        layout1.addComponent(label);

        layout1.addComponent(label1);
        layout1.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
        layout1.setComponentAlignment(label1, Alignment.MIDDLE_CENTER);
        layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

        setContent(layout);
        panel.setContent(layout1);

输出:

Answer 1

Vaadin中的标签的默认宽度为100%,这意味着该Label组件填充整个水平空间,没有留出对齐空间.这种默认的原因是,在大多数情况下,您希望文本在到达父组件的边缘时进行换行.

要使代码中的标签居中,只需将其宽度设置为未定义即可 label.setWidth(null);

额外垂直空间的共鸣是在VerticalLayout.由于你为它设置了一个expicit高度,但是没有为插槽指定任何扩展比率,它使两个插槽同样高; 每个布局高度的一半.要解决这个问题,你可以做两件事情之一:在摆脱高度layout1通过更换调用layout1.setSizeFull();与layout1.setWidth("100%");-or做设定扩展比率为第二插槽layout1.setExpandRatio(label1, 1);.设置扩展比率将使布局使用第二个插槽中的所有额外空间,使两个标签更加靠近.

有了setExpandRatio你,当然也有对的排列变化label1从MIDDLE_CENTER到TOP_CENTER,这样空的空间被放置在标签下面,而不是均匀地绕过它.