我在 Vaadin 11 中有一个 View ，它显示在类似于 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水平布局组件。
如何修复它(确保我添加的每个组件都显示在单独的行上)？
最佳答案
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 中，以便它可以完成工作。
关于java - 为什么 Vaadin 11 中 VerticalLayout 内的组件不垂直对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53318838/