我使用 Vaadin 的 GridLayout 来可视化一些标题和值标签。 GridLayout 有 2 列和几行。标题标签位于左侧,其关联的值标签位于右侧。
我希望第一列消耗尽可能少的空间,第二列应该占据浏览器窗口的所有重新挖掘空间。如果值标签需要的空间多于可用空间,则它必须打破界限。
我试着玩setColumnExpandRatio()
。如果我确定第二列的以下比率(并省略第一列的比率规范),那么一切都会按要求工作,除了具有非常大文本内容的值标签不会在行末尾中断这一事实。相反,会出现一个水平滚动条:
public class MyPanel extends GridLayout
{
public MyPanel()
{
setWidth("100%");
setMargin(true);
setSpacing(true);
buildView();
}
public void buildView()
{
removeAllComponents();
setColumns(2);
setColumnExpandRatio(1, 1);
...
titleLabel.setWidth(null);
valueLabel.setWidth(null);
addComponent(titleLabel);
addComponent(valueLabel);
setComponentAlignment(titleLabel, Alignment.TOP_RIGHT);
}
}
如果我还指定第一列的比率,则第一列消耗的空间比实际需要的空间多。
我怎样才能实现我的要求?
的内容Label
仅在以下情况下换行Label
有定义的宽度。想一想:如果宽度未定义,那么如何确定何时换行呢?这里的解决方案很简单,只需设置宽度valueLabel
to "100%"
。事实上,事情比这更简单。一个新鲜的Label
默认情况下实例宽度为 100%,因此您只需删除将宽度设置为的行即可null
.
这是一个例子UI
类来测试它:
public class MyUI extends UI {
@Override
protected void init(VaadinRequest request) {
GridLayout layout = new GridLayout();
layout.setWidth("100%");
layout.setColumns(2);
layout.setColumnExpandRatio(1, 1);
Label label1 = new Label("Lorem ipsum");
Label label2 = new Label(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+ "Morbi augue sapien, tempus ac mattis ut, iaculis a erat. "
+ "Ut vitae ante metus. Pellentesque vitae rutrum lacus, id volutpat tellus. "
+ "Duis eget ultricies metus. "
+ "Vestibulum ac nibh eget velit pretium semper et eget est. "
+ "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. "
+ "Curabitur nec rutrum tellus. Curabitur vel urna a nunc cursus congue. "
+ "Vestibulum pellentesque mi in leo luctus, sit amet auctor enim ornare. "
+ "Proin in mauris convallis, vestibulum nisi sed, consectetur dolor. "
+ "Vestibulum ultricies metus ut nulla gravida, eget dapibus turpis fringilla. "
+ "Mauris hendrerit felis non aliquam elementum. "
+ "Phasellus ut purus ut urna consequat commodo. "
+ "Cras semper ac augue quis rutrum. "
+ "Nunc tristique magna sit amet congue faucibus.");
layout.addComponent(label1);
layout.addComponent(label2);
label1.setWidth(null);
label2.setWidth("100%"); // I'm being explicit, but you can just as well leave this out if you like
setContent(layout);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)