如何增加 Vaadin 11.0.0 网格中的行高？答案

【问题标题】：How to increase the row height in a Vaadin 11.0.0 grid?如何增加 Vaadin 11.0.0 网格中的行高？
【发布时间】：2019-04-18 09:20:21
【问题描述】：

我想在 Vaadin 11 的网格中实现自动换行。据我了解，您需要为此做两件事：

设置相应单元格的样式。
增加行高。

我使用以下代码完成了第一步：

productsGrid.addColumn(TemplateRenderer.of( “[[项目名称]]”） .withProperty("name", Product::getName)) .setHeader("姓名");

现在我需要增加行高。

也许使用productsGrid.getElement().getStyle().set(...) 可以做到这一点，但我不知道如何使用它。

如何增加 Vaadin 11 网格中的行高（即，使行更高，以便在单元格中显示长文本）？

更新 1：

我正在使用以下代码来创建网格：

private Grid<Product> createProductsGrid() {
    final Grid<Product> productsGrid = new Grid<Product>();
    productsGrid.setItems(Arrays.asList(AltFondUtilities.INSTANCE));
    productsGrid.addColumn(TemplateRenderer.<Product>of(
                    "<div style='word-wrap: break-word;'>[[item.name]]</div>")
                    .withProperty("name", Product::getName))
                    .setHeader("Название");
    productsGrid.addColumn(Product::getInterestRatePercentPerAnnum)
                    .setHeader("Ставка");
    productsGrid.addColumn(Product::getProvider).setHeader("Организация");
    productsGrid.setHeightByRows(true);
    return productsGrid;
}

结果：即使name 列的样式正确，自动换行也不起作用。

【问题讨论】：

要使单元格环绕，请为其添加主题：grid.element.themeList.addAll('wrap-cell-content')

标签： java css vaadin vaadin-grid

【解决方案1】：

从 Vaadin 11 的 Java Examples of Grid 看来，使用 setHeightByRows 是可能的

Grid<Person> grid = new Grid<>();

// When using heightByRows, all items are fetched and
// Grid uses all the space needed to render everything.
grid.setHeightByRows(true);

【讨论】：

谢谢，但没用。我在问题的更新 1 中发布了用于创建网格的代码，以及我得到的截图。
setHeightByRows 大约是整个网格的大小，而不是单行。这个问题是关于单行的大小

【解决方案2】：

行高的设置取决于使用的主题。如果 UI 使用的是 LUMO 主题，则可以通过以下 hack 更改表格的行高。

        Grid<Object> grid = new Grid<>();        
        grid.getStyle().set("--lumo-line-height-xs", "0");
        grid.getStyle().set("--lumo-line-height-s", "0");
        grid.getStyle().set("--lumo-size-xs", "0");
        grid.getStyle().set("--lumo-size-s", "0");
        grid.getStyle().set("--lumo-space-xs", "0");
        grid.getStyle().set("--lumo-space-s", "0");
        grid.getStyle().set("margin-top", "20px");
        grid.getStyle().set("line-height", "20px");

【讨论】：