使用视图状态和变换

 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：