为什么 VerticalLayout 中的组件在 Vaadin 11 中不垂直对齐？

Question

我在 Vaadin 11 中有一个视图，它显示在 URL，如 products/X，其中 X 是产品标识符。

@Route(value = "products")
public class ProductView extends VerticalLayout implements HasUrlParameter<String> {

    public ProductView() {

    }

    [...]
}

如果没有产品，我无法在此页面上显示任何信息，因此我在方法 setParameter:

中添加了所有组件

@Override
public void setParameter(final BeforeEvent beforeEvent, 
                final String param) {
    final Product product = findProduct(param);

    if (product == null) {
        return;
    }
    final Text name = new Text(product.getName());
    final Text interestRate = new Text(String.format("Ставка: %.2f", 
                    product.getInterestRatePercentPerAnnum()));
    final Text duration = new Text(String.format("Срок: %d - %d месяцев",
                    product.getDurationMonths().getStart(),
                    product.getDurationMonths().getEndInclusive()));
    final Text provider = new Text(String.format("Организация: %s",
                    product.getProvider().getName()));
    final Text description = new Text("<html>Hi there! <b>Bold</b> text</html>");


    add(name);
    add(interestRate);
    add(duration);
    add(description);
    add(provider);
}

但是各种数据项显示在一行中：

这意味着出于某种原因 VerticalLayout 水平布置组件。

如何修复它（确保我添加的每个组件都显示在单独的行中）？

Answer 1

Text 是一个特定的组件，因为它对应于 DOM（在浏览器中）中的文本节点。因此，没有 HTML 元素，添加到 VerticalLayout 的内容将从左向右流动。这就是它在浏览器树中的样子：

改用Div：

final Div name = new Div(new Text("Product"));
final Div interestRate = new Div(new Text(String.format("Ставка: %.2f",
            0.05d)));
final Div duration = new Div(new Text(String.format("Срок: %d - %d "
            + "месяцев", 10, 11)));
final Div provider = new Div(new Text(String.format("Организация: %s"
            , 10)));
final Div description = new Div(new Text("<html>Hi there! <b>Bold</b>"
            + " text</html>"));

通过使用 Div，您将 div 元素插入到 VerticalLayout 中，因此它可以正常工作。

为什么 VerticalLayout 中的组件在 Vaadin 11 中不垂直对齐？

Why aren't components inside VerticalLayout aligned vertically in Vaadin 11?

java

layout

vaadin