效果图:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao">
<!-- Demo_(视图状态)更改元素的父组件; -->
<s:layout>
<s:VerticalLayout paddingLeft="200" paddingTop="200" gap="20"/>
</s:layout>
<s:states>
<s:State name="boxLeft"/>
<s:State name="boxRight"/>
</s:states>
<!--view-->
<s:HGroup gap="20">
<s:VGroup id="left" width="250" height="200">
<s:Label text="左边区域"/>
<s:Button id="button" includeIn="boxLeft" label="box >>" label.boxRight="<< box"
click.boxLeft="currentState='boxRight'" click.boxRight="currentState='boxLeft'"/>
<s:Rect id="boxElement" width="100%" height="100%" includeIn="boxLeft">
<s:fill>
<s:SolidColor color="#de7800"/>
</s:fill>
</s:Rect>
</s:VGroup>
<s:VGroup id="right" width="250" height="200">
<s:Label text="右边区域" />
<fx:Reparent target="button" includeIn="boxRight" />
<fx:Reparent target="boxElement" includeIn="boxRight"/>
</s:VGroup>
</s:HGroup>
</s:Application>