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

Question

我正在开发一个应用程序，我希望视图堆栈在某些事件上切换视图。我让它们正确切换，但是当视图之间发生变化时似乎有轻微的“闪烁”。我试过 creationPolicy="all" 但这并不能解决问题。 “闪烁”如此明显的原因是视图堆栈中的视图具有不同的宽度/高度。有没有办法停止 viewstack 视图开关上的这种“闪烁”效果？

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

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

这是视图堆栈的 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.textXML.designer.toolbars.shapeControlEditor.proportionalResize.@tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <mx:ColorPicker name="{_appData.textXML.designer.toolbars.shapeControlEditor.shapeColorPicker.@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="{_appData.textXML.designer.toolbars.shapeControlEditor.bringForward.@tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.sendBackward.@tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.deleteControl.@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.textXML.designer.toolbars.shapeControlEditor.proportionalResize.@tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.bringForward.@tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.sendBackward.@tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.deleteControl.@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>

Answer 1

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

感谢 www.Flextras.com

首先制作一个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>

Answer 2

http://tv.adobe.com/watch/codedependent/flex-4-states-and-transitions/