Flex Canvas 子项随机调整大小

Question

我有一个带有视图堆栈的应用程序，其中包含需要显示的所有组件。导航在主应用程序中定义。 所有组件均基于画布。

主应用程序如下所示：

<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”没有按应有的方式显示：水平列表缩小，并且没有完全显示其项目，而是为每个项目提供水平和垂直滚动条... 我目前正在尝试重现这种行为（以获取打印屏幕），但知道，它工作正常...-_-'一旦我让它工作，因为它不应该工作，我将上传一张图像。

这是 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

这是随机行为：

替代文本http://www.freeimagehosting.net/uploads/fcf1a603f4.png

FI：刷新应用程序后，我恢复了正常行为。

希望这能帮助您理解我的问题>_<

问候。

Answer 1

你的“mainBox”的宽度没有像其他所有的那样设置为 100%。这可能会导致您看到的这些问题。当你嵌套一堆容器时，只需要一个就会把事情搞砸。打破链条中的一个环节就会出现问题。