消耗Vaadin Gridlayout中的可用空间,但考虑换行 [英] Consume available space in Vaadin Gridlayout, but consider line breaks
问题描述
我使用Vaadin的GridLayout来可视化某些标题和值标签.GridLayout有2列和几行.标题标签在左侧,而其相关的值标签在右侧.
I use Vaadin's GridLayout for visualization of some title and value labels. The GridLayout has 2 columns and several rows. Title labels are on the left side and their associated value labels on the right.
我希望第一列占用尽可能少的空间,第二列应该占用浏览器窗口的所有刷新空间.如果值标签需要的空间超过可用空间,则必须换行.
I want the first column to consume as less space as possible and the second column should occupy all the remining space of the browser's window. If a value label requires more space than available then it must break the line.
我试图玩 setColumnExpandRatio()
.如果我确定第二列的以下比率(并省略第一列的比率规范),那么一切都按要求工作,除了具有非常大文本内容的值标签不会在行尾中断.相反,会出现一个水平滚动条:
I tried to play with setColumnExpandRatio()
. If I determine following ratio for the second column (and omit a ratio specification for the first column) then everything works as requested except the fact that value labels with very large textual content don't break at the line's end. Instead, a horizontal scroll bar appears:
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);
}
}
如果我还为第一列指定比率,那么第一列会消耗比实际需要更多的空间.
If I also specify a ratio for the first column then the first column consumes more space than really needed.
我如何实现我的要求?
推荐答案
Label
的内容仅在 Label
具有定义的宽度时才换行.考虑一下:如果宽度是不确定的,那么即使在换行时如何确定宽度呢?此处的解决方案非常简单,只需将 valueLabel
的宽度设置为"100%"
.实际上,它比这更简单.默认情况下,新的 Label
实例的宽度为100%,因此您只需删除将宽度设置为 null
的行即可.
The contents of a Label
only wrap if the Label
has a defined width. Think about it: if the width is undefined, how should it even be determined when to wrap the text? The solution here is as simple as setting the width of valueLabel
to "100%"
. Actually, it's even more simple than that. A fresh Label
instance is 100%-wide by default, so you can just remove the line where you are setting the width to null
.
这是一个用于测试它的示例 UI
类:
Here's an example UI
class to test it with:
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);
}
}
这篇关于消耗Vaadin Gridlayout中的可用空间,但考虑换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!