Toggle Panel容器之间的切换

    <mx:states>
        <mx:State name="closed">
            <mx:RemoveChild target="{content}"/>
            <mx:SetStyle target="{vbox1}" name="left" value="0"/>
            <mx:SetEventHandler target="{btn}" name="click" handler="currentState=''"/>
            <mx:SetProperty target="{btn}" name="label" value="&gt;"/>
        </mx:State>
    </mx:states>
    <mx:transitions>
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Parallel id="t1" targets="{[content,btn]}">
                <mx:Move duration="400"/>
                <mx:Resize duration="400"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:VBox 
        width="390" 
        height="100%" 
        bottom="0" 
        left="0" 
        id="content" 
        backgroundColor="#CFCFCF" 
        paddingBottom="10" 
        paddingLeft="10" 
        paddingRight="10" 
        paddingTop="10">
        <mx:Text 
            text="我是左边" 
            width="100%" 
            height="100%" />
    </mx:VBox>
    <mx:VBox 
        y="0" 
        height="100%" 
        left="390" 
        id="vbox1" 
        backgroundColor="#CFCFCF">
        <mx:Button 
            label="&lt;"
            click="currentState='closed'"  
            id="btn" 
            toggle="true" 
            height="50" 
            width="10" 
            fontSize="9" 
            cornerRadius="0" 
            textIndent="0" 
            paddingLeft="0" 
            paddingRight="0" 
            paddingBottom="0" 
            paddingTop="0" letterSpacing="0"/>
    </mx:VBox>

 

利用State 来达到显示不同的容器。