为什么在Vaadin 11中VerticalLayout内的组件不是垂直对齐的？
DP_*_*DP_ 2 java layout vaadin
我在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水平地布置组件.
我该如何解决它(确保我添加的每个组件都显示在一个单独的行上)？
Text是一个特定的组件,因为它对应于DOM中的文本节点(在浏览器中).因此,没有HTML元素,并且添加到VerticalLayoutwill 的内容将从左向右流动.这就是它在浏览器树中的样子:
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它可以做它的工作.