[英]Best way to size containers in Flex to obey ONLY parent containers' explicit dimensions

I've been running into this problem with Flex for nearly a year, and each time I work up a quick hack solution that works for the time being. I'd like to see if anyone has a better idea.


Here are the conditions of a problem:


|------Container  ------------|
|  explicitHeight:  400 (or whatever)
|                             |
|  |-------- VBox  -------|   |
|  |  percentHeight: 100  |   | 
|  |                      |   |
|  |  |-Repeater------|   |   |
|  |  | Potentially   |   |   |
|  |  | a lot of stuff.   |   |

The problem is that, contrary to what I would like to happen, the VBox will ALWAYS expand to accommodate the content inside it, instead of sticking to the explicit height of its parent and creating a scroll bar.


My solution has been to hard code in a reference to the parent (or however far up the display list we need to go to find an explicitly set value as opposed to a percentage).


I've even considered using this in a utility class:


public static function getFirstExplicitHeightInDisplayList(comp:UIComponent):Number{
    if (!isNaN(comp.explicitHeight)) return comp.explicitHeight;
    if (comp.parent is UIComponent) return    
    else return 0;

Please tell me there's a better way.


5 个解决方案



You have to use the "autoLayout" parameter on the VBox as documentation say:

"By default, the size of the VBox container is big enough to hold the image at it original size. If you disable layout updates, and use the Zoom effect to enlarge the image, or use the Move effect to reposition the image, the image might extend past the boundaries of the VBox container.

You set the autoLayout property to false, so the VBox container does not resize as the image resizes. If the image grows to a size so that it extends beyond the boundaries of the VBox container, the container adds scroll bars and clips the image at its boundaries.


I hope that will help you.




setting minHeight = 0 is all you need to do.

設置minHeight = 0就是你需要做的。

This tells the VBox to ignore it's children's measurements when sizing itself, and calculate its height instead based on it's own/it's parents constraints. Set everything else as you normally would, scrolling and everything else will work perfectly.


Spent DAYS on this one a year ago- it's not intuitive, they could have probably named the property better. Hope this saves u guys some time...

一年前在這一天度過了一天 - 這不直觀,他們可能更好地命名了這個房產。希望這能節省你們一些時間......



AutoLayout=false seems to only prevent layout from being rerun when the childrens' size change. However if you add or remove children, layout will rerun anyway.

AutoLayout = false似乎只能防止在孩子的體型變化時重新運行布局。但是,如果添加或刪除子項,則無論如何都會重新運行布局。

Setting minHeight=0 does indeed completely disconnect the (outer) size of the VBox from the size and number of the children, which is what I wanted.

設置minHeight = 0確實完全斷開了VBox的(外部)大小與子節點的大小和數量的關系,這正是我想要的。

Pawing through the Flex source code I didn't see the mechanism by which setting minHeight=0 made it work like I wanted, so I salute Yarin for discovering it. Thanks!

通過Flex源代碼,我沒有看到設置minHeight = 0的機制讓它像我想要的那樣工作,所以我向Yarin致敬。謝謝!



Set the properties of your Container:


clipContent = true;
verticalScrollPolicy = "off"

Then your VBox should automatically clip when it has percentHeight = 100;

然后你的VBox應該在它具有percentHeight = 100時自動剪輯;

Works for me in Flex 3.

適用於Flex 3。

If you need to get really fancy, you can set the scrollRect on objects:


scrollRect = new Rectangle(x, y, w, h);

depending on what you need it to do.




In fact, Yarin Kessler brought us the only right answer here (unfortunately, i don't have the rights to comment its post, that's why i'm doing it here).

事實上,Yarin Kessler在這里給我們帶來了唯一正確的答案(不幸的是,我沒有權利發表評論,這就是我在這里做的原因)。

When your HBox sizing is based on a percentage value, you are hoping that only its container will influence its size. That's wrong, there is an other rule, a stronger one. It's the fact that a container (which HBox is) has a minimal size, which is the addition of the default/explicit sizes of its own childs components.


So, if your percentage value result in a value smaller than the minimal size, the minimal size wins and applied to the HBox. Since the HBox is displaying all of its children, there is no need for scrollbars.


So using :


minHeight = 0;
minWidth = 0;

is like telling to the HBox that's its minimal size is 0 instead of its children default sizes. You are redefining it and that way the minimal size is smaller than the percentage value and lose the battle.


The only phrase i found in Adobe documentation explaining this is this one :


A percentage-based container size is advisory. Flex makes the container large enough to fit its children at their minimum sizes.

基於百分比的容器大小是建議性的。 Flex使容器足夠大,以適合其最小尺寸的兒童。

Hope i made myself clear,


(feel free to correct my incorrect english sentences...)




粤ICP备14056181号  © 2014-2021 ITdaan.com