如何在瓦丁11.0.0网格中增加行高？

Question

我想在Vaadin 11的网格中实现自动换行。据我所知，你需要为此做两件事:

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

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

productsGrid.addColumn（TemplateRenderer.of（“[[item.name]]”）.withProperty（“name”，产品：：getName））.setHeader（“name”）；

现在我需要增加行高。

也许可以使用产品Grid.get元素（）.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;
}

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

Answer 1

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

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

Answer 2

从Vaadin 11的Java网格示例来看，使用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);