Best way to size containers in Flex to obey ONLY p

问题:

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    
         getFirstExplicitHeightInDisplayList(UIComponent(comp.parent));
    else return 0;
}

Please tell me there's a better way.

回答1:

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.

回答2:

setting minHeight = 0 is all you need to do.

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

回答3:

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.

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.

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!

回答4:

Set the properties of your Container:

clipContent = true;
verticalScrollPolicy = "off"

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

Works for me in 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.

回答5:

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

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.

Hope i made myself clear,

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