在Flex中調整容器大小的最佳方法是遵循父容器的顯式尺寸

[英]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.

我已經在Flex中遇到了這個問題將近一年,每次我都會使用快速的黑客解決方案。我想看看是否有人有更好的主意。

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.

問題是,與我想要發生的情況相反,VBox將始終擴展以容納其中的內容,而不是堅持其父級的顯式高度並創建滾動條。

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.

請告訴我有更好的方法。

5 个解决方案

#1


8  

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.

您必須在VBox上使用“autoLayout”參數,因為文檔說:“默認情況下,VBox容器的大小足以將圖像保持為原始大小。如果禁用布局更新,並使用縮放效果放大圖像,或使用移動效果重新定位圖像,圖像可能會延伸超過VBox容器的邊界。您將autoLayout屬性設置為false,因此VBox容器不會隨着圖像調整大小而調整大小。如果圖像增長為了使其超出VBox容器的邊界,容器添加滾動條並在其邊界處剪切圖像。

I hope that will help you.

我希望這會對你有所幫助。

#2


13  

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.

這告訴VBox在調整自身大小時忽略它的子測量,並根據它自己/它的父母約束來計算它的高度。像往常一樣設置其他所有內容,滾動,其他一切都將完美運行。

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


2  

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致敬。謝謝!

#4


1  

Set the properties of your Container:

設置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:

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

depending on what you need it to do.

取決於你需要它做什么。

#5


0  

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.

當您的HBox大小基於百分比值時,您希望只有其容器會影響其大小。那是錯的,還有另一個規則,一個更強大的規則。事實上,容器(HBox是)具有最小的大小,這是其自己的子組件的默認/顯式大小的添加。

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.

因此,如果您的百分比值導致小於最小尺寸的值,則最小尺寸將獲勝並應用於HBox。由於HBox顯示其所有子節點,因此不需要滾動條。

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.

就像告訴HBox它的最小尺寸是0而不是它的子默認尺寸。您正在重新定義它,並且最小尺寸小於百分比值並且失去戰斗。

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

我在Adobe文檔中找到的唯一一個解釋這個的短語就是這個:

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

(隨意糾正我不正確的英語句子......)


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2008/10/28/724d469dbab2264dfff5a6f5a640ddc8.html



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