Layout 在VAIDIN网格布局中消耗可用空间，但是考虑断线

我使用Vaadin的GridLayout可视化一些标题和值标签。GridLayout有两列和几行。标题标签位于左侧，其关联的值标签位于右侧

我希望第一列占用尽可能少的空间，而第二列应该占据浏览器窗口的所有空间。如果值标签需要的空间大于可用空间，则必须断开该行

我试着玩

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);
   }
}

如果我还为第一列指定了一个比率，那么第一列占用的空间比实际需要的多

---

如何实现我的要求？

只有当

标签

具有定义的宽度时，

标签的内容才会换行。想想看：如果宽度没有定义，那么应该如何确定何时包装文本？这里的解决方案非常简单，只需将
valueLabel
的宽度设置为
“100%”
。事实上，它甚至比这更简单。默认情况下，新的
标签
实例的宽度为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);
    }
}

这绝对是正确的答案！我从未试过这种组合。我找到了一个更复杂的解决方案，但效果与要求的相同。这是Jouni Koivuviita的评论。他建议引用一个自定义的CSS类，该类支持自动换行。Java:
label2.addStyleName（“wrap”），CSS:
.v-label-wrap{空白：正常；}