Vaadin：如何实现可滚动列的水平布局？

Question

我想实现一个水平布局，其中表格内容区域位于左侧，基于手风琴的详细信息列位于右侧。内容区域应占据剩余页面高度（基本上是

100vh - navbarHeight

），并且不应超过该值。

问题出在详细信息栏中，特别是与手风琴有关的问题。展开的面板可以包含许多行，因此我将手风琴放在滚动条中，但它不起作用。它没有得到可滚动的手风琴，而是扩展了根容器，我得到了可滚动的窗口。

简化代码：

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

var tableBox = new VerticalLayout(grid);
tableBox.setHeightFull();

var accordion = new Accordion();
accordion.setWidthFull();

var detailsBox = new Scroller(accordion);
detailsBox.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
detailsBox.setWidth("450px");

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

我正在使用 Vaadin 24。

Answer 1

我认为您缺少布局组件的明确高度。尝试在

setHeightFull()

、

layout

和

tableBox

上使用

detailsBox

。

Answer 2

好的，我明白了。所有 Vaadin 布局控件基本上都是 Flex 容器。这个任务无法单独使用 Flex 来解决，但可以使用自定义 CSS 来解决，我是按照此代码片段完成的。

https://stackoverflow.com/a/59550839/8817161