flex_状态组使用浅析；

效果图：

orange状态：black状态：

green状态：blue状态：

<?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:states>
        <s:State name="orange" stateGroups="box" />
        <s:State name="black" stateGroups="box" />
        
        <s:State name="green" stateGroups="circle" />
        <s:State name="blue" stateGroups="circle" />
    </s:states>
   
    <!--view-->
    <s:VGroup verticalCenter="0" horizontalCenter="0">
        <s:HGroup>
            <s:Button label.orange="Black" label.black="Green" label.green="Blue" label.blue="Orange"
                      click.orange="currentState = 'black'" click.black="currentState='green'"
                      click.green="currentState='blue'" click.blue="currentState='orange'"/>
        </s:HGroup>
        <s:Rect width="200" height="100" visible="false" includeInLayout="false"
                visible.box="true" includeInLayout.box="true">
            <s:fill>
                <s:SolidColor color.black="#000000" color.orange="#de7800"/>
            </s:fill>
        </s:Rect>
        
        <s:Ellipse width="200" height="100" visible="false" includeInLayout="false"
                   visible.circle="true" includeInLayout.circle="true">
            <s:fill>
                <s:SolidColor color.green="green" color.blue="blue"/>
            </s:fill>
        </s:Ellipse>
    </s:VGroup>
</s:Application>