在上一个单组件改变状态效果的基础上,增加至两个组件之间的切换,更好的理解其中的关联,下次有时间把他们之间的关系总结一下!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="applicationcenter" currentState="pan1_state">
<mx:states>
<mx:State name="pan1_state">
<mx:SetEventHandler target="{but1}" name="click" handler="currentState='pan2_state'"/>
</mx:State>
<mx:State name="pan2_state">
<mx:RemoveChild target="{pan1}"/>
<mx:AddChild relativeTo="{canvas1}" position="lastChild">
<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" id="pan2" title="pan2">
<mx:Button x="82" y="58" label="but2" id="but2" click="currentState='pan1_state'"/>
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Style source="css/css.css"/>
<mx:Canvas width="352" height="260" borderColor="#A42B2B" borderStyle="solid" borderThickness="5" id="canvas1">
<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" title="pan1" id="pan1">
<mx:Button x="82" y="58" label="but1" id="but1"/>
</mx:Panel>
</mx:Canvas>
<mx:transitions>
<mx:Transition fromState="pan1_state" toState="pan2_state">
<mx:Sequence>
<mx:WipeLeft target="{pan1}" showTarget="false"/>
<mx:RemoveChildAction target="{pan1}"/>
<mx:AddChildAction target="{pan2}"/>
<mx:WipeRight target="{pan2}"/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="pan2_state" toState="pan1_state">
<mx:Sequence target="{pan2}">
<mx:WipeLeft showTarget="false"/>
<mx:RemoveChildAction target="{pan2}"/>
<mx:AddChildAction target="{pan1}"/>
<mx:WipeRight target="{pan1}"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
</mx:Application>