Question

我在Vaadin 11中有一个视图，该视图显示在类似products/X的URL上，其中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中，以便它可以正常工作。

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

1 个答案: