2010-03-18 172 views
4

我試圖使用Flex組件框架來創建自定義Flex組件:的Flex - 自定義組件 - 百分比寬度/高度

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

所有優秀的組件允許您使用使用百分比值來定義它們的尺寸:

MXML:

的TextInput寬度= 「100%」

的ActionScript在運行時:

textinp.percentWidth = 100;

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

回答

6

Flex佈局的工作方式是讓每個組件按照父級指定的大小排列子級。 「兒童」確實包括常見的兒童 - getChildren(),numChildren - 以及構成邊框,句柄等的組件,這些組件稱爲「chrome」,並且是getRawChildren()的一部分。

Flex框架現在對所有組件(實際上是顯示樹的一部分)執行兩個循環。第一個是自下而上的(最先嵌套的元素)並調用measure()方法。它應該計算如果組件可以擁有足夠多的空間,並且沒有限制(想一想:滾動條)並將其放入measuredWidth和measuredHeight屬性中,它將佔用多少空間(寬度/高度)。其次,它計算出它想要佔用多少空間作爲絕對最小值,放入measuredMinHeight/measuredMinWidth中。爲了計算這個值,我們使用getExplicitOrMeasuredHeight()/ Width()來詢問邊界粗細,鉻和普通兒童的大小,並將它們加在一起。這就是爲什麼它是深度優先。

第二個循環是做實際的佈局。這從樹的頂部開始,並且調用updateDisplayList,其中x/y參數告訴組件實際上具有多大的尺寸。基於這些信息,組件將告訴它的直接孩子他們應該在哪裏(相對於他們的父母)以及他們應該有多大 - child.move(x,y)和child.setActualSize(w,h)

So它實際上是考慮相對大小的父容器。你的組件聲明它是理想的(最小尺寸以便顯示所有內容)和measure()中的最小尺寸,並且必須處理其在updateDisplayList()中獲得的任何內容。父組件獲取其擁有的可用空間,確保每個組件獲得最小大小,然後將剩餘的組件分配給所有組件。在這個階段,它會查看子項的百分號/高度屬性。

所以如果你想把你的組件放在一個像HBox這樣的標準Flex容器中,你不需要做任何特殊的工作。

相關問題