使用AddChildAction和RemoveChildAction

11.3.1. 问题
我想在播放transition 时能控制何时添加或删除子组件。
11.3.2. 解决办法
使用AddChildAction 和RemoveChildAction 标签分别控制子组件的添加和删除。
11.3.3. 讨论
AddChildAction 和RemoveChildAction 对象执行方式和SetPropertyAction 和SetPropertyStyle对象类似，它们包装了State 对象的功能，可在Transition 中使用，为了与Transition 中的并行(Parallel)或序列(Sequence)对象进行交互。

默认情况下State 中是通过AddChild 对象添加子组件的。为了控制何时子组件被添加或在添加和删除前播放某个特效，我们可以在执行序列中使用AddChildAction 代替State 中的AddChild 标签，例如下面的代码提供一个Transition 对象的执行顺序：

**************

<mx:Transition fromState="view" toState="edit">
<mx:Sequence>
<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"
target="{viewCanvas}"/>
<mx:RemoveChildAction target="{viewCanvas}"/>
<mx:AddChildAction relativeTo="{this}">
<mx:target>
<mx:Canvas id="editCanvas"
addedToStage="editCanvas.includeInLayout =true"
removedFromStage="editCanvas.includeInLayout = false">
<mx:TextInput text="SAMPLE"/>
</mx:Canvas>
</mx:target>
</mx:AddChildAction>
</mx:Sequence>
</mx:Transition>

 

**************

这个例子首先执行Fade 特效，然后移除子组件并添加新子组件。如果你在State 中使用AddChild，则子组件将在Fade 特效完成之前就被添加了。这个例子中是不会发生这样的事，通过使用AddChildAction，你可以控制子组件何时被添加进来。

还有RemoveChild 标签是用来控制何时移除组件，但不是删除组件，AddChildAction 的机理不是去自动调用remove 方法。要想移除子组件，你必须在State 中添加RemoveChild 对象：
**************

-XML

<mx:State name="edit">
<mx:RemoveChild target="{viewCanvas}"/>
</mx:State>

**************

下面是完整的代码:

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" currentState="view">
<mx:transitions>
<mx:Transition fromState="view" toState="edit">
<mx:Sequence>
<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"
target="{viewCanvas}"/>
<mx:RemoveChildAction target="{viewCanvas}"
effectStart="trace('removing')"/>
<mx:AddChildAction relativeTo="{this}">
<mx:target>
<mx:Canvas id="editCanvas"
addedToStage="editCanvas.
includeInLayout = true"
removedFromStage="editCanvas.includeInLayout = false">
<mx:TextInput text="SAMPLE"/>
</mx:Canvas>
</mx:target>
</mx:AddChildAction>
<mx:SetPropertyAction target="{editCanvas}"
name="includeInLayout" value="true"/>
<mx:SetPropertyAction target="{editCanvas}"
name="alpha" value="1"/>
<mx:Glow color="0xffff00" blurXTo="30" blurYTo="30"
blurXFrom="0" blurYFrom="0" duration="1000" target="{this}"/>
<mx:Glow color="0xffff00" blurXTo="30" blurYTo="30"
blurXFrom="0" blurYFrom="0" duration="1000"
target="{editCanvas}"/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="edit" toState="view">
<mx:Sequence>
<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"
target="{editCanvas}"/>
<mx:RemoveChildAction target="{editCanvas}"/>
<mx:AddChildAction relativeTo="{this}"
effectStart="trace('removing')">
<mx:target>
<mx:Canvas id="viewCanvas"
addedToStage="viewCanvas.includeInLayout =
true" removedFromStage="viewCanvas.includeInLayout = false">
<mx:Text text="DIFFERENT TEXT"/>
</mx:Canvas>
</mx:target>
</mx:AddChildAction>
<mx:SetPropertyAction target="{viewCanvas}"
name="includeInLayout" value="true"/>
<mx:SetPropertyAction target="{viewCanvas}"
name="alpha" value="1"/>
<mx:Glow color="0xffff00" blurXTo="30" blurYTo="30"
blurXFrom="0" blurYFrom="0" duration="1000"
target="{this}"/>
<mx:Glow color="0xffff00" blurXTo="30" blurYTo="30"
blurXFrom="0" blurYFrom="0" duration="1000"
target="{viewCanvas}"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="view">
<mx:RemoveChild target="{editCanvas}"/>
</mx:State>
<mx:State name="edit">
<mx:RemoveChild target="{viewCanvas}"/>
</mx:State>
</mx:states>
<mx:ComboBox dataProvider="{['view', 'edit']}"
change="currentState = cb.selectedItem as String" id="cb"/>
</mx:HBox>