使用檢視狀態和變換

 states：應用程式或組件的布局

transitions：變換效果

設計步驟：

1、設計基礎狀態

2、添加並設定檢視狀態

3、定義狀態間的轉換方法

4、建立並綁定變換

Demo：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <!--定義新的狀態集，包括多個State-->
    <mx:states>
        <mx:State name="Advanced">
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
                    <mx:CheckBox label="Regular Expression"/>
                    <mx:CheckBox label="Case Sensitive"/>
                    <mx:CheckBox label="Exact Phrase"/>
                </mx:VBox>
            </mx:AddChild>
            <!--為LinkButton關聯事件，改變狀態，即恢複的原始狀態-->
            <mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=&quot;&quot;"/>
        </mx:State>
    </mx:states>
    <!--定義變換效果集，包括多個變換Transition-->
    <mx:transitions>
        <mx:Transition id="myTransition" fromState="*" toState="Advanced">
            <!--並行效果-->
            <mx:Parallel target="{myVBox}">
                <mx:WipeDown duration="2000"/>
                <mx:Dissolve alphaFrom="0.0"  alphaTo="1.0" duration="2000"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>

    <mx:Panel x="5" y="5" width="300" height="400" layout="absolute" id="panel1" title="View States">
        <mx:Label x="20" y="70" text="Search"/>
        <mx:TextInput x="20" y="90"/>
        <mx:Button x="185" y="90" label="Go"/>
        <!--通過LinkButton的click事件改變狀態，進入Advanced狀態-->
        <mx:LinkButton x="20" y="120" label="AdvancedOption" click="currentState=&quot;Advanced&quot;" id="linkbutton1"/>
    </mx:Panel>
    
</mx:Application>

 

Result：