Flex Canvas child隨機調整大小

Question

我有一個包含所有需要顯示的組件的viewstack應用程序。導航在主應用程序中定義。 所有組件都基於畫布。

主要應用效果如下：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*"> 
<mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF"> 
    <mx:Image id="header" verticalAlign="top" /> 
    <mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%"> 
    <components:HomePage id="hp" width="100%"/> 
    <components:CollectionSelection id="cs" width="100%"/> 
    <components:SearchEngine id="se" width="100%"/> 
    <components:SearchResult id="sr" width="100%"/> 
    <components:Tray id="tr" width="100%"/> 
    <components:Order id="or" width="100%"/> 
    </mx:ViewStack> 
    <mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/> 
</mx:VBox> 
</mx:Application> 

我越來越從托盤組件一個奇怪的行爲。

下面是組件托盤中的代碼（我只離開了顯示信息）：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Image id="bg" 
    horizontalCenter="0" verticalCenter="0" 
    width="100%" height="100%" 
    maintainAspectRatio="false"/> 

<mx:HBox width="100%"> 
    <mx:Button x="20" y="20" label="BACK"/> 
    <mx:Spacer width="100%"/> 
    <mx:LinkBar 
    itemClick="linkbar_itemClick(event)" 
    styleName="GLBLinkBTN" 
    separatorColor="#FFFFFF" 
    separatorWidth="1" 
    > 
    <mx:dataProvider> 
    <mx:Object label="CLEAR"/> 
    <mx:Object label="LOGOUT"/> 
    </mx:dataProvider> 
    </mx:LinkBar> 
</mx:HBox> 

<mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0"> 
    <mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5"> 
    <mx:Label styleName="TRTitle" paddingLeft="15"/> 
    <mx:Spacer width="100%"/> 
    <mx:Label styleName="TRItems" paddingRight="15"/> 
    </mx:HBox> 
    <mx:HorizontalList id="hlist" 
    dataProvider="{TrayData.instance.itemsCollection}" 
    columnCount="{TrayData.instance.hlistColumns}" 
    rowCount="1" 
    itemRenderer="components.TrayItem" 
    horizontalScrollPolicy="off" 
    rollOverColor="#FFFFFF" 
    selectionColor="#FFFFFF" 
    horizontalCenter="0" verticalCenter="0" 
    borderStyle="none" 
    horizontalScrollPosition="{TrayData.instance.hsPosition}" 
    /> 
    <mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20"> 
    <mx:Box width="25" verticalAlign="middle" horizontalAlign="left"> 
    <mx:Button id="leftBtn" /> 
    </mx:Box> 
    <mx:Spacer width="100%"/> 
    <mx:Box width="25" verticalAlign="middle" horizontalAlign="right"> 
    <mx:Button id="rightBtn" /> 
    </mx:Box> 
    </mx:HBox> 
</mx:VBox> 
</mx:Canvas> 

所有部件正常顯示。然而，有時，隨機地，托盤組件中的vbox「mainBox」不會顯示，因爲它應該：horizo​​ntallist縮小，而不是完全顯示其項目，我得到每個項目的水平和垂直滾動條... 我目前試圖重現這種行爲（得到一個打印屏幕），但是知道，它工作正常... -_-'只要我得到它的工作，因爲它不應該，我會上傳一個圖像。

下面是的itemRenderer（以防萬一...）代碼：

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" > 
<mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3"> 
    <mx:Spacer width="100%"/> 
    <mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center"> 
    <mx:Button width="8" height="8"/> 
    </mx:Box> 
</mx:HBox> 
<mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15"> 
    <mx:Canvas id="thumbnail"> 
    <mx:Image id="thumbnailBG" /> 
    <mx:Image id="thumbnailIM" /> 
    </mx:Canvas > 
    <mx:VBox width="100%" verticalGap="7"> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label paddingBottom="5"/> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74"opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    <mx:HBox width="100%" height="13"> 
    <mx:Label width="74" opaqueBackground="#ECE5E2"/> 
    <mx:Label /> 
    </mx:HBox> 
    </mx:VBox> 
    <mx:Button /> 
</mx:VBox> 

</mx:VBox> 

你的幫助，真的可以理解。

問候， BS_C3

---

嗨！我終於再次得到了隨機行爲。 這裏有一些屏幕截圖... 的代碼並沒有改變......

這是正常的行爲：

alt text http://www.freeimagehosting.net/uploads/d1df2950af.png

這是隨機行爲：

alt text http://www.freeimagehosting.net/uploads/fcf1a603f4.png

FI：當我執行應用程序刷新時，我得到了正常的行爲。

希望這將有助於你理解我的問題> _ <

問候。

Answer 1

您的「mainBox」沒有將其寬度設置爲100％，這是所有其他人的做法。這可能會導致你看到的那些問題。當你嵌入一堆容器時，只需要一個就可以搞定。打破該鏈中的一個環節併發生問題。