Flex - 自定義組件 - 百分比寬度/高度

Question

我正在嘗試使用Flex組件框架創建自定義Flex組件：

http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html 。

所有好的組件都允許您使用百分比值來定義它們的尺寸：

MXML：

TextInput width =“100％”

要么

運行時的Actionscript：

textinp.percentWidth = 100;

我的問題是如何在自定義組件的measure（）方法中實現百分比寬度/高度？ 更具體地說，這些百分比在某個階段轉換為像素值，這是如何完成的？

Answer 1

Flex布局的工作方式是讓每個組件將其子項布局為父項指定的大小。 “Children”確實包括通常的孩子 - getChildren（），numChildren - 以及組成邊框，句柄等的組件，這些組件被稱為“chrome”並且是getRawChildren（）的一部分。

Flex框架現在對所有組件（實際上是顯示樹的一部分）執行兩個循環。 第一個是自下而上（首先是最深的嵌套元素）並調用measure（）方法。 如果組件可以擁有所需的空間，則應該計算組件將占用多少空間（寬度/高度），沒有限制（想想：滾動條）並將其放入measuredWidth和measuredHeight屬性中。 其次，它計算了它想要的絕對最小空間，放入measuredMinHeight / measuredMinWidth。 為了計算這一點，使用getExplicitOrMeasuredHeight（）/ Width（）詢問邊框粗細，鉻和常規子項的大小，並將它們相加。 這就是為什么它是深度優先的原因。

第二個循環是進行實際布局。 這從樹的頂部開始，並調用updateDisplayList，x / y參數告訴組件它實際具有多少大小。 根據這些信息，該組件將告訴其直接的孩子他們應該在哪里（相對於他們的父母）以及他們應該有多大 - child.move（x，y）和child.setActualSize（w，h）

因此，它實際上是將相對大小考慮在內的父容器。 您的組件聲明它是理想的（最小大小以便可以顯示所有內容）和measure（）中的最小大小，並且必須處理它在updateDisplayList（）中獲得的任何內容。 父組件獲取它具有的可用空間，確保每個組件獲得它的最小大小，然后將其余組件分配給所有組件。 在此階段，它將查看其子項的percentWidth / Height屬性。

因此，如果您想將組件放在像HBox這樣的標准Flex容器中，則無需對百分比大小進行任何特殊操作。