Flex Canvas child随机调整大小

时间:2010-03-25 10:31:05

标签: flex random resize components

我有一个带有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>

我从TRAY组件中得到一个奇怪的行为。

这是组件托盘的代码(我只留下了显示信息):

<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:当我刷新应用程序时,我恢复了正常的行为。

希望这有助于您了解我的问题&gt; _&lt;

问候。

1 个答案:

答案 0 :(得分:2)

您的“mainBox”的宽度设置为100%,与其他人一样。这可能会导致您遇到的问题。当你嵌套一堆容器时,只需要一个容器即可。打破该链中的一个链接并出现问题。