Flex视图状态

每个页面可以通过s:states灵活的定义很多状态，各个状态之间的切换效果，可以通过s:Transition实现。

Transition 类定义了一组在响应视图状态更改时播放的效果。视图状态定义了如何更改状态，而过渡则定义了在状态更改过程中可视更改发生的顺序。可使用 Transition 类的 toState 和 fromState 属性来指定触发过渡的状态更改。

默认情况下，fromState 和 toState 属性均设置为“*”，表示将过渡应用到视图状态的任何更改。fromState为*表示，从任何状态更改为toState的状态时，toState为*表示从fromState更改为任意状态时。

简单代码定义如下：

<s:states>

       <s:State name="default"/>

       <s:State name="left"/>

</s:states>

<s:transitions>

<s:Transition fromState="left" toState="default">

           <s:Parallel target="{loginPanel}">

               <s:Resize duration="400" widthTo= "800"/>

           </s:Parallel>

</s:Transition>

</s:transitions>

transitions 中可以定义一些列的状态变化效果。Transition中定义了一个由状态left变化为default的效果，即使leftUpPanel组件的宽度变成800；duration定义了变化延时效果为400ms

这样一个简单的页面展开和收缩效果，只需要根据操作更改currentState的属性值即可实现，通过这种方法，就可以省去很多工作量。代码如下

注：a. currentState是UIComponent类的一个公共属性，也就是说所有继承自UIComponent的控件，都可以此属性来切换组件的状态。

b. 上例中Transition下面的效果通过Parallel实现，即同时执行，也可以使用Sequence来一个接一个的执行。

c. Transition中除了可以添加如上的<s:Resize> 效果外，还可以添加很多如SetPropertyAction、SetStyleAction等的效果。

d. 只能在应用程序或自定义控件的根中指定 states 属性，而不能在子控件中指定。

转载于:https://www.cnblogs.com/gaozhen-Dream/p/Flex_states.html