为什么Flex Viewstack在视图之间切换时会“闪烁”？

我正在研究一个应用程序，我希望viewstack可以在某些事件上切换视图。我让它们正确切换，但当发生视图之间的变化时，似乎会有轻微的“闪烁”。我试过creationPolicy =“all”但这并不能解决问题。 “眨眼”非常明显的原因是视图中的视图具有不同的宽度/高度。有没有办法阻止视窗堆栈视图切换的“闪烁”效果？为什么Flex Viewstack在视图之间切换时会“闪烁”？

这里是其中的视图切换发生的代码：

   function show(value:String):void { 
        switch(value) { 
        case "ShapeObject": 
         viewstack.selectedIndex = 2; 
         break; 
        case "AssetObject": 
         viewstack.selectedIndex = 0; 
         break; 
        } 
       }

这里是则ViewStack的MXML：

 <mx:ViewStack id="viewstack" resizeToContent="true" clipContent="false" creationPolicy="all" mouseDown="stopPropagationClick(event)" click="stopPropagationClick(event)"> 
      <mx:HBox id="shapeMenu" width="250" height="44" verticalAlign="middle" horizontalAlign="center" horizontalGap="0"> 
       <mx:Image source="@Embed(source='assets/objectTools_greyBack_left.png')" height="100%" width="10"/> 
       <mx:HBox verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" height="100%" width="100%" styleName="contextualCenterBkg"> 
        <ui:HTMLLabelButton id="ConstrainShape" name="{_appData.t[email protected]tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <mx:ColorPicker name="{_appData[email protected]tooltip}" close="onColorPickerClose(event)" change="{onShapeColorPickerChange(event)}" open="onColorPickerOpen(event)" click="stopPropagationClick(event)" mouseDown="stopPropagationClick(event)" focusEnabled="false" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_app[email protected]tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_app[email protected]tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_appD[email protected]tooltip}" id="DeleteShape" styleName="btnContextualDelete" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
       </mx:HBox> 
       <mx:Image source="@Embed(source='assets/objectTools_greyBack_right.png')" height="100%" width="10"/> 
      </mx:HBox> 

      <mx:HBox id="multiMenu" width="250" height="44" verticalAlign="middle" horizontalAlign="center" horizontalGap="0"> 
       <mx:Image source="@Embed(source='assets/objectTools_greyBack_left.png')" height="100%" width="10"/> 
       <mx:HBox verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" height="100%" width="100%" styleName="contextualCenterBkg"> 
        <ui:HTMLLabelButton id="ConstrainShapeMulti" name="{_appData.t[email protected]tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_app[email protected]tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_app[email protected]tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
        <ui:HTMLLabelButton name="{_appD[email protected]tooltip}" id="DeleteShapeMulti" styleName="btnContextualDelete" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/> 
       </mx:HBox> 
       <mx:Image source="@Embed(source='assets/objectTools_greyBack_right.png')" height="100%" width="10"/> 
      </mx:HBox> 
     </mx:ViewStack>

来源

2011-09-12 Cam

你动态地设置其尺寸切换屏幕时？ – Exort

不，尺寸在创建时在mxml中设置。 – Cam

你能发表一些代码吗？ –

flex-blog.com/flex-effects-example-in-a-viewstack

谢谢www.Flextras.co米

首先做一个viewstack：

<mx:LinkBar dataProvider="viewStack"/> 
    <mx:ViewStack height="200" width="300" id="viewStack"> 

     <!-- Red View --> 
     <mx:VBox backgroundColor="#FF0000" label="Screen One"> 

     </mx:VBox> 

     <!-- Green View --> 
     <mx:VBox backgroundColor="#00FF00" label="Screen Two"> 

     </mx:VBox> 

     <!-- Blue View --> 
     <mx:VBox backgroundColor="#0000FF" label="Screen Three"> 

    </mx:VBox> 

</mx:ViewStack>

然后做出一些转变：

<mx:WipeLeft duration="500" id="wipeLeft"/> 
<mx:WipeRight duration="500" id="wipeRight"/>

然后应用转换：

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" 
    backgroundColor="#FF0000" label="Screen One"/> 
</mx:VBox> 

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" 
    backgroundColor="#00FF00" label="Screen Two"/> 
</mx:VBox> 

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" 
    backgroundColor="#0000FF" label="Screen Three">   
</mx:VBox>

来源

2011-09-15 15:00:42 Cam

您可能想在此处引用链接的相关部分。已知连接腐烂会破坏很多很好的答案。 – Robusto