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的wiki页面显示了一篇相关文章，但我无法弄清楚如何使用它。似乎不推荐使用，因为我无法访问#getColumn（）; - 方法？！ https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths

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

Answer 1

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

如果您希望两者都使用总宽度的50％，只需在两列上将展开比率设置为相同的值。

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

如果布局具有未定义的大小且包含的组件具有100％大小，则组件将填充布局给出的空间，而布局将缩小以适合组件占用的空间，是一个悖论。此要求分别适用于高度和宽度。

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的自定义宽度

2 个答案: