java - Vaadin 不正确对齐

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。由于您已经为它设置了一个明确的高度，但没有为插槽指定任何扩展比率，因此它使两个插槽的高度相同；每个布局高度的一半。要解决这个问题，您可以执行以下两项操作之一:通过将对 layout1.setSizeFull(); 的调用替换为 layout1 来消除 layout1 中的高度.setWidth("100%"); — 或通过执行 layout1.setExpandRatio(label1, 1); 为第二个插槽设置扩展比率。设置展开比例将导致布局使用第二个插槽中的所有额外空间，使两个标签靠得更近。

使用 setExpandRatio，您当然还必须将 label1 的对齐方式从 MIDDLE_CENTER 更改为 TOP_CENTER , 因此空白区域位于标签下方，而不是均匀地围绕着它。