Vaadin 24：如何实现含可滚动Accordion列的HorizontalLayout？

问题核心：Scroller 未生效是因为没有给它设置明确的高度限制，导致它随内容自动扩展，进而触发窗口级滚动。需要给详情列的 Scroller 绑定和表格区域一致的高度（即 100vh - navbarHeight），同时确保 Accordion 占满 Scroller 的可用空间。

解决步骤 #

• 给详情列设置固定高度约束，和表格区域保持一致，使用 CSS 计算值绑定高度
• 让 Accordion 占满 Scroller 的高度，确保内容超出时触发内部滚动
• 优化表格容器的布局，移除不必要的内边距避免高度溢出

修改后的代码 #

// 假设 navbarHeight 是已定义的变量，比如 60px
String navbarHeight = "60px";

var grid = new Grid<>(Pojo.class, false);

// 表格容器：设置高度为视口高度减去导航栏高度，移除默认内边距避免溢出
var tableBox = new VerticalLayout(grid);
tableBox.setHeight("calc(100vh - " + navbarHeight + ")");
tableBox.setPadding(false);
tableBox.setSpacing(false);

var accordion = new Accordion();
accordion.setWidthFull();
accordion.setHeightFull(); // 关键：让Accordion占满Scroller的高度

// 详情列容器：设置固定宽度和与表格一致的高度，启用垂直滚动
var detailsBox = new Scroller(accordion);
detailsBox.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
detailsBox.setWidth("450px");
detailsBox.setHeight("calc(100vh - " + navbarHeight + ")");

var layout = new HorizontalLayout();
layout.add(tableBox);
layout.add(detailsBox);
layout.setFlexGrow(1, tableBox);
layout.setFlexGrow(0, detailsBox);
layout.setSizeFull();
layout.setPadding(false);
layout.setSpacing(false);

关键说明 #

• calc(100vh - navbarHeight)：确保表格和详情列都严格限制在导航栏下方的剩余视口高度内，不会超出
• accordion.setHeightFull()：让 Accordion 填充 Scroller 的全部高度，当面板内容超出时，Scroller 才会触发内部滚动
• 移除布局的默认 padding/spacing：避免额外的空间占用导致高度溢出

内容的提问来源于stack exchange，提问作者Maxim