GWT ScrollPanel标头

时间:2015-12-07 22:02:20

标签: gwt scrollpane

我今天刚开始研究GWT,并希望向专家们介绍如何取得一定的成果。

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

对于行标题,可以使用垂直堆叠的组件填充此标题。垂直滚动条滚动垂直组件堆栈以及主客户区域。水平滚动条水平滚动主区域,但不滚动行标题,它始终可见。

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

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

如果我必须实施这个,你会建议采用什么方法?

我考虑为行标题创建一个VerticalPanel,一个与主要组件的视图一样大的Canvas。我可以在滚动更改时在画布上绘制内容,但我不确定如何仅制作VerticalPanel节目的一部分(视口)。

我还考虑过在ScrollPane中只包装垂直面板,有一个单独的水平滚动条(虚拟地)水平滚动画布,但在这种情况下,垂直滚动条出现在标题和画布之间,这不是什么我想要。

谢谢!

1 个答案:

答案 0 :(得分: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实现了ProvideResize,因此它将为ScrollPanel提供可用空间。确保LayoutPanel本身是实现ProvideResize的窗口小部件的子项,或者显式设置其大小。

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