Vaadin GridLayout 的自定义宽度

Question

我正在 Vaadin 中使用 2x2 GridLayout。

    gridLayout = new GridLayout(2, 2);
        gridLayout.setWidth(100, Unit.PERCENTAGE);
        gridLayout.setMargin(true);
        gridLayout.setSpacing(true);

左上角的单元格包含一个简单的右对齐标签。右上角的单元格包含一个左对齐的文本字段。第二行仅包含文本字段下方的标签。

    gridLayout.addComponent(captionLabel, 0, 0);
    gridLayout.addComponent(inputField, 1, 0);

    gridLayout.setComponentAlignment(captionLabel, Alignment.MIDDLE_RIGHT);
    gridLayout.setComponentAlignment(inputField, Alignment.MIDDLE_LEFT);

现在我想让网格中的两列都将大小设置为 50% 以使整个布局在我的页面中间对齐 - 现在它稍微向左移动，我无法弄清楚为什么...

Vaadin 的维基页面显示了一篇相关文章，但我不知道如何使用它。似乎已被弃用，因为我无法访问#getColumn()； - 方法？！ https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths

有关详细信息：GridLayout 作为单独的组件添加到 VerticalLayout。

Answer 1

您可以使用 grid.setColumnExpandRatio(1, 1); 方法影响列宽。

如果您希望两者都使用总宽度的 50%，只需将两列的扩展比率设置为相同的值即可。

另请注意：包含具有百分比大小的组件的布局必须具有定义的大小！

如果布局具有未定义的大小并且所包含的组件具有比方说 100% 的大小，则该组件将填充布局给定的 space，而布局将缩小以适合space 被组件占用，这是一个悖论。此要求分别适用于高度和宽度。

Book of Vaadin

Answer 2

通过为包含标签的左列添加 HorizontalLayout-wrapper 解决了这个问题。右列包含一个 VerticalLayout 和所有其他组件。

    Label captionLabel = new Label(localized);
    captionLabel.setSizeUndefined();
    HorizontalLayout wrapper = new HorizontalLayout();
    wrapper.setSizeFull();
    wrapper.addComponent(captionLabel);
    wrapper.setComponentAlignment(captionLabel, Alignment.TOP_RIGHT);
    [...]        
    gridLayout.addComponent(wrapper, 0, 0);
    gridLayout.addComponent(inputLayout, 1, 0);
    gridLayout.setColumnExpandRatio(0, (float)0.5);
    gridLayout.setColumnExpandRatio(1, (float)0.5);

Vaadin GridLayout 的自定义宽度

Custom width of Vaadin GridLayout

alignment

grid-layout

vaadin

vaadin7