GWT ScrollPanel標頭

Question

我今天才開始研究GWT，並想向專家們介紹如何取得一定的成果。

我需要有一個帶有標題的scrollPane，類似於swing的JSCrollPane。 對於不熟悉它的人，JScrollPane可以具有行標題或列標題。 現在，讓我們集中討論帶有行標題的代碼。 主要組件將是Canvas，在其中可以基於滾動窗格的滾動條的位置繪制視圖

對於行標題，可以用垂直堆疊的組件填充此標題。 垂直滾動條滾動垂直組件堆棧以及主要客戶區域。 水平滾動條水平滾動主區域，但不滾動行標題，該區域始終保持可見狀態。

據我所知，標准的GWT ScrollPanel不直接支持標頭。

首先，標准GWT中是否已經有提供此功能的組件？ 我看了一下Cell組件，這些組件可能適用於列標題，但似乎不適用於行標題。 某些第三方（可能是開源）庫中是否有這樣的組件？

如果必須執行此操作，您會建議哪種方法？

我考慮過只為行標題創建一個VerticalPanel，它與主組件的視圖一樣大。 滾動更改后，我可以在畫布上繪制內容，但是我不確定如何只顯示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布局模型實現相同的結果。 在標題上設置“ flex-grow：0”，在ScrollPanel上設置“ flex-grow：1”。 好處是您可以通過僅更改一個CSS屬性將同一組件轉換為垂直或水平。 而且響應速度更快，並且更容易適應不同的屏幕尺寸。