flex_(视图状态)更改元素的父组件；

效果图：

<?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 &gt;&gt;" label.boxRight="&lt;&lt; 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>