GWT ScrollPanel 标头

Question

我今天刚开始研究GWT，想请教高手如何达到一定的效果。

我需要一个带有标题的scrollPane，类似于swing 的JSCrollPane。对于那些不熟悉它的人，JScrollPane 可以有行或列标题。现在让我们专注于带有行标题的一个。主要组件将是一个 Canvas，我将在其中根据滚动窗格的滚动条的位置绘制一个视图

在行标题的情况下，此标题可以填充垂直堆叠的组件。垂直滚动条滚动垂直组件堆栈，以及主客户区。水平滚动条水平滚动主区域，但不滚动行标题，它始终可见。

据我所知，标准 GWT ScrollPanel 不直接支持标题。

首先，标准 GWT 中是否已有提供此功能的组件？我查看了 Cell 组件，它可能适用于列标题，但似乎不适用于行标题。某些第三方（可能是开源）库中是否有这样的组件？

如果我必须实现这个，你会建议什么方法？

我考虑为行标题创建一个 VerticalPanel，一个与主组件的视图一样大的 Canvas。我可以在滚动更改时在画布上绘制内容，但我不确定如何只显示 VerticalPanel 的一部分（视口）。

我还考虑将垂直面板包装在 ScrollPane 中，有一个单独的水平滚动条来（实际上）水平滚动画布，但在这种情况下，垂直滚动条出现在标题和画布之间，这不是我想。

谢谢！

Answer 1

使用具有两个子级的 LayoutPanel：FlowPanel（或 Label）来表示您的标题（垂直或水平）和 ScrollPanel。将这些小部件彼此相邻放置。

LayoutPanel layoutPanel = new LayoutPanel();
Label header = new Label("My header");
ScrollPanel scrollPanel = new ScrollPanel();

layoutPanel.add(header);
layoutPanel.add(scrollPanel);

layoutPanel.setWidgetLeftWidth(header, 0, Unit.PX, 36, Unit.PX);
layoutPanel.setWidgetLeftRight(scrollPanel, 36, Unit.PX, 0, Unit.PX);

LayoutPanel 实现了 ProvidesResize，所以它会给 ScrollPanel 提供可用空间。确保 LayoutPanel 本身是实现 ProvidesResize 的小部件的子级，或显式设置其大小。

如果您只支持现代浏览器，您可以使用flexbox layout model 获得相同的结果。在标题上设置“flex-grow: 0”，在 ScrollPanel 上设置“flex-grow: 1”。优点是您可以通过仅更改一个 CSS 属性将相同的组件转换为垂直或水平。而且响应速度更快，更容易适应不同的屏幕尺寸。