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％，这是所有其他人的做法。这可能会导致你看到的那些问题。当你嵌入一堆容器时，只需要一个就可以搞定。打破该链中的一个环节并发生问题。