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>

            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的样式还没有做完。。