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