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

问题描述

我试图在页面中使用GWT的ScrollPanel。由于大部分内容都在ScrollPanel中，因此我希望它能够尽可能大地占用页面部分并调整页面大小。当然，我想要设置它的相对大小，即setSize（100％，100％）。但是文档说它只能以绝对CSS单位设置大小（例如10px，1em，但不是50％）。

我无法理解为什么ScrollPanel无法在GWT中占用相对大小。搜索和阅读很多内容后，有人建议将元素的大小设置为100％（请参阅​​ GWT相对宽度）。我可以尝试一下，但不知道它是否会影响ScrollPanel的其他功能 - 因为我也将控制面板的滚动。

  ScrollPanel myScrollPanel = new ScrollPanel（）; 
 myScrollPanel.setSize（2112px，150px）; //任意宽度。 
 myScrollPanel.getElement（）。getStyle（）。setProperty（width，100％）; 
  

所以这里是我的问题：

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

（2）如何解决？ p>

解决方案

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

（1）使用实现了ProvideResize接口的父窗口小部件 - 例如LayoutPanel。然而，重要的是，ProvideResize - RequiresResize链从RootPanel到ScrollPanel一直保持不变。

在典型的实现中，LayoutPanel（或其变体）表示整个页。然后，你可以添加各种儿童，例如标题，主视图，左侧菜单等。对于每个孩子，您可以设置首选大小。例如：

  myLayoutPanel.setWidgetTopBottom（myScrollPanel，32，Unit.PX，0，Unit.PX）; 
  

在这个例子中，ScrollPanel将从页面顶部的32px开始的所有可用空间通往底部的路。您可以用百分比或其他单位来设置其位置。

（2）您可以使用纯CSS完成相同的布局。如果你不关心很老的浏览器，最好的选择是使用 flexbox布局模型。在这种情况下，您可以在父窗口小部件上设置 display：flex ，并在ScrollPanel上设置 flex-grow：1 它会占用所有可用空间（除非有其他> flex-grow 兄弟姐妹，在这种情况下，它们将分割额外空间）。

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%")

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%");  

So here's my questions:

(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) How to work around?

解决方案

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) 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.

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); 

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) 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屋！