Vaadin 8:如何在网格中显示全尺寸图片?

Question

我正在尝试在Vaadin 8网格中显示人员列表，包括他们的照片(字节[]中的JPEG(。 但是，在组件列中(请参阅下面的代码(，只有图片的顶部可见。

personsGrid.addComponentColumn(v -> {
if (v.getPhoto() != null) {
Image personsPhoto = new Image();
displayImage(personsPhoto, v.getPhoto());
return personsPhoto;
} 
return new Image("", new ThemeResource("img/no-picture.jpg"));
});

有没有办法在网格中显示全尺寸图片？ 网格行通常如何根据内容高度调整其高度？

Answer 1

如问题下的评论中所述，这无法动态实现，但您可以使用 CSS 显式设置网格行的高度。

与此类似的内容应该会让您朝着正确的方向前进：

爪哇岛：

final Grid<SomeBean> grid = new Grid<>();
grid.addStyleName("custom-grid-style");

.CSS：

.custom-grid-style .v-grid-body .v-grid-row .v-grid-cell {
min-height: 50px;
line-height: 50px;
}

如果您不确定在何处更改 CSS，则需要在正在编辑的类或 UI 上添加@StyleSheet注释。然后，.css文件必须位于资源文件夹中的同一包位置。

例如：

类在包中：com.example.components

那么你的CSS文件将在：src/main/resources/com/example/components