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接口，这意味着它需要从其父级获取大小，或者必须显式设置其大小。因此，您有两种选择。

（1）使用实现ProvideResize接口的父窗口小部件 - 例如，LayoutPanel。但是，重要的是，从RootPanel到ScrollPanel，ProvideResize - RequiresResize链保持不间断。

在典型的实现中，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兄弟，在这种情况下，它们将分开额外的空间）。

Answer 2

第一个问题的答案非常简单。使用元素的相对大小时，您指的是父元素的大小。因此，当您设置df_of_vecs %>% names() %>% paste('vec_1 ~', .) %>% map(~lm(as.formula(.x), data = df_of_vecs))时，这意味着您的元素应该是其父元素的100％大小。

有一些方法可以得到你想要的东西：

使用Viewport-percentage lengths - 您可以设置height: 100%，这意味着height: 100vh - 这是最简单的方式，但可能尚未被所有浏览器支持
将100% of the viewport height和html元素设置为100％高度 - 这将允许您使用子元素的相对高度
使用GWT DockLayoutPanel或DockPanel并将您的滚动面板添加到body窗格 - 它将占用所有剩余空间

Answer 3

首先，ScrollPanel是不能充当其他小部件的东西，因为我不知道为什么。无法设置相对大小（50％），如果我给它一些风格，它会在某处丢失，无法从页面中找到。

我的解决方案是使用ResizeLayoutPanel。 Andrei建议使用ProvideResize，但要求提供/要求调整大小的链保持不间断，这可能非常棘手。我发现这个ResizeLayoutPanel“ProvideResize给它的一个孩子，但不是RequiresResize”，这是我复合的根面板的完美候选者。然后，我只是扩展ScrollPanel以在“onResize”方法中调整自身大小，只要它由父ResizeLayoutPanel调用。

我的第一个问题仍然没有答案：ScrollPanel首先表现得像这样吗？我试图在源代码中找到答案，但没有成功（虽然我没有花足够的时间研究源代码）。

public class My100PctScrollPanel extends ScrollPanel {
    @Override
    public void onResize() {
        // Window.alert("on resize"); 
        this.setWidth(this.getParent().getOffsetWidth()+"px");
        this.setHeight(this.getParent().getOffsetHeight()+"px");
        super.onResize();
    }
}

........

compositeRoot = new ResizeLayoutPanel();  

........
scrollPanel = new My100PctScrollPanel();
compositeRoot.clear();
compositeRoot.add(scrollPanel);

如何使用相对大小的ScrollPanel

3 个答案: