flex 用HBox VBox实现accordion效果

代码：

<?xml version="1.0" encoding="utf-8"?> 
<logic:ExtensionSet03AS xmlns:fx="http://ns.adobe.com/mxml/2009"   
                        xmlns:s="library://ns.adobe.com/flex/spark"   
                        xmlns:mx="library://ns.adobe.com/flex/mx"   
                        xmlns:logic="com.runqianapp.complex.view.logic.*"   
                        width="520" height="455" title="扩展设置" fontFamily="宋体" 
                        skinClass="skins.TitleSkin" creationPolicy="all" > 
    <fx:Script> 
        <![CDATA[  
            import controller.ImageLocator;  
        ]]> 
    </fx:Script> 
    <fx:Declarations> 
        <s:RadioButtonGroup id="extType"/> 
        <s:State name="over"/> 
        <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
    </fx:Declarations> 
    <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="0"> 
        <mx:VBox width="98%" backgroundColor="#F5F5F5" borderStyle="solid" borderColor="#999999" paddingBottom="10" 
                 paddingLeft="6" height="100%" paddingTop="15"  paddingRight="6" verticalGap="2"> 
            <mx:HBox width="100%" verticalAlign="middle" height="20"> 
                <s:Label text="本12312312312312" paddingLeft="5"/> 
            </mx:HBox> 
              
            <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
                <mx:HBox id="h1" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#FAFAFA"> 
                    <s:Image source="{ImageLocator.accordionIcon1Class}" id="tag1"/> 
                    <s:Label text="向下扩展" /> 
                    <s:Image source="{ImageLocator.tipOut}" id="tip1"/> 
                </mx:HBox> 
                <mx:VBox id="v1" width="98%"  height="200"  backgroundColor="#FAFAFA"   label="扩展方向"  visible="true" 
                         horizontalAlign="center" paddingLeft="10"  paddingTop="8" cornerRadius="5"> 
                    <s:Button label="2313123"/> 
                </mx:VBox> 
            </mx:VBox> 
              
            <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
                <mx:HBox id="h2" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#B3D6F8"> 
                    <s:Image source="{ImageLocator.accordionIcon2Class}" id="tag2"/> 
                    <s:Label text="向下扩展" /> 
                    <s:Image source="{ImageLocator.tipOut}" id="tip2"/> 
                </mx:HBox> 
                <mx:VBox id="v2" width="98%"  height="0"  label="跟随扩展格"   backgroundColor="#FAFAFA"    
                         horizontalAlign="center" paddingLeft="10"  paddingTop="8" cornerRadius="5"> 
                    <s:Button label="2313123"/> 
                </mx:VBox> 
            </mx:VBox> 
              
            <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
                <mx:HBox id="h3" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#B3D6F8"> 
                    <s:Image source="{ImageLocator.accordionIcon2Class}" id="tag3"/> 
                    <s:Label text="向下扩展" /> 
                    <s:Image source="{ImageLocator.tipOut}" id="tip3"/> 
                </mx:HBox> 
                <mx:VBox id="v3" width="98%" height="0" label="跟随其他单元格扩展"    backgroundColor="#FAFAFA"    
                         horizontalAlign="center" paddingLeft="10"  paddingTop="8"  cornerRadius="5"> 
                    <s:Button label="2313123"/> 
                </mx:VBox> 
            </mx:VBox> 
              
        </mx:VBox> 
    </mx:VBox> 
</logic:ExtensionSet03AS> 

效果：

其实没什么难度，主要就是给每个HBox 和VBox  ID ,然后给他们添加mouseover out

click等事件 然后在里面对Box的样式进行修改就可以了。例子里HBox的样式还没有做完。。