javascript - 如何使用相对大小的ScrollPanel

Question

我正在尝试在页面中使用 GWT 的 ScrollPanel。由于大部分内容都在 ScrollPanel 中，因此我希望它占据页面尽可能大的部分，并随着页面大小的调整而调整大小。当然，我想将其设置为相对大小，即 setSize("100%","100%")。然而文档说它只能以绝对CSS单位设置大小(例如“10px”，“1em”，但不能“50%”)

我不明白为什么 ScrollPanel 不能采用 GWT 中的相对大小。经过大量搜索和阅读后，有人建议将元素的大小设置为“100%”(请参阅​​ GWT Relative Width )。我可能会尝试一下，但不确定它是否会影响 ScrollPanel 的其他功能 - 因为我还将控制面板的滚动。

ScrollPanel myScrollPanel = new ScrollPanel();
myScrollPanel.setSize("2112px", "150px");   // Arbitrary width.
myScrollPanel.getElement().getStyle().setProperty("width", "100%");  

这是我的问题:

(1) 为什么？？？ (这让我抓狂，因为我无法理解，也许对 GWT 内部机制有更深入了解的人可以启发我)

(2)如何解决？

Answer 1

ScrollPanel 实现了 RequiresResize 接口(interface)，这意味着它需要从其父级获取其大小，或者必须显式设置其大小。因此，您有两个选择。

(1) 使用实现 ProvidesResize 接口(interface)的父窗口小部件 - 例如 LayoutPanel。然而，重要的是，ProvidesResize - RequiresResize 链从 RootPanel 到 ScrollPanel 始终保持不间断。

在典型的实现中，LayoutPanel(或其变体)代表整个页面。然后您可以向其中添加各种子项，例如“标题”、“主视图”、“左侧菜单”等。您可以为每个子项设置首选大小。例如:

myLayoutPanel.setWidgetTopBottom(myScrollPanel, 32, Unit.PX, 0, Unit.PX); 

在此示例中，您的 ScrollPanel 将占用页面上从顶部 32px 一直到底部的所有可用空间。您可以用百分比或其他单位来设置其位置。

(2) 您可以使用纯 CSS 完成相同的布局。如果您不关心非常旧的浏览器，最好的选择是使用 flexbox layout model 。在这种情况下，您在父窗口小部件上设置 display: flex ，并在 ScrollPanel 上设置 flex-grow: 1 - 告诉它占用所有可用空间(除非有其他flex-grow sibling ，在这种情况下，它们将分割额外的空间)。