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