如何使用具有相对大小的 ScrollPanel [英] How to use ScrollPanel with relative size

问题描述

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

I'm trying to use a ScrollPanel of GWT in a page. Since most of the contents are in the ScrollPanel, I want it to take an as-large-as-possible part of the page and resize as the page may resize. Naturally I would want to set it a relative size, i.e. setSize("100%","100%"). However the document says it can only be set a size in absolute CSS units (e.g. "10px", "1em", but not "50%")

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

I cannot understand why ScrollPanel cannot take relative size in GWT. After searching and reading a lot, someone suggests just set the element's size to "100%" (see GWT Relative Width). I may give it a try but not sure if it will affect ScrollPanel's other function - as I will also control the scroll of the panel.

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

所以这是我的问题:

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

(1) Why??? (this is driving me mad as I cannot understand, maybe someone with deeper understanding of the GWT inside mechanism can enlighten me)

(2) 如何解决?

推荐答案

ScrollPanel 实现了 RequiresResize 接口，这意味着它需要从其父级获取其大小，否则必须明确设置其大小.因此，您有两个选择.

ScrollPanel implements RequiresResize interface, which means that it needs to get it size from its parent, or its size has to be set explicitly. Thus, you have two options.

(1) 使用实现了ProvidesResize 接口的父控件——例如LayoutPanel.然而，重要的是 ProvidesResize - RequiresResize 链从 RootPanel 到您的 ScrollPanel 一直保持不间断.

(1) Use a parent widget that implements ProvidesResize interface - for example, LayoutPanel. It's important, however, that ProvidesResize - RequiresResize chain remains unbroken all the way from RootPanel to your ScrollPanel.

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

In a typical implementation, LayoutPanel (or its variant) represents your entire page. Then you can add various children to it, e.g. "header", "main view", "left menu", etc. For each child you can set the preferred size. For example:

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

在此示例中，您的 ScrollPanel 将占用页面上从顶部 32 像素开始一直到底部的所有可用空间.您可以改为以百分比或其他单位设置其位置.

In this example your ScrollPanel will take all available space on a page starting from 32px at the top and all the way to the bottom. You can set its position in percentages or other units instead.

(2) 你可以用纯 CSS 来完成同样的布局.如果你不关心非常旧的浏览器，最好的选择是使用 flexbox 布局模型.在这种情况下，您在父小部件上设置 display: flex，在 ScrollPanel 上设置 flex-grow: 1 - 告诉它占用所有可用空间(除非有其他 flex-grow 兄弟姐妹，在这种情况下，他们将分割额外的空间).

(2) You can accomplish the same layout with pure CSS. If you don't care about very old browsers, the best option is to use flexbox layout model. In this case you set display: flex on your parent widget, and flex-grow: 1 on your ScrollPanel - telling it to take all available space (unless there are other flex-grow siblings, in which case they will split the extra space).

这篇关于如何使用具有相对大小的 ScrollPanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！