FLex 类似QQ菜单实现的实现

使用mx：Accordion是添加条目必须VBox或渲染项目可以使用：

简单按钮作为折叠菜单的头部使用

 创建一个渲染条目：

代码如下：

1. <mx:headerRenderer>
2.             <mx:Component>
3.                 <mx:Button fontWeight="normal"
4.                         labelPlacement="left"
5.                         textAlign="left"
6.                         cornerRadius="{outerDocument.accordion.getStyle('headerHeight')/2}" />
7.             </mx:Component>
8.         </mx:headerRenderer>
9.  

 在点击是修改选中条目使用：

 

使用下面属性设置特的分割图表

通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标

 

使用：Flex中如何利用AccordionHeader的paddingLeft样式指定Accordion容器头部文本位置

 

 

使用：使用addChild()和removeChild()函数，动态添加或删除Accordion容器中项目。
添加子条目信息

 

源代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" autoLayout="false"    backgroundColor="white" label="Accordion特效学习" >
 <mx:Style>
  AccordionHeader{
   
   /*指定条目图片的外观颜色*/
   fillColors:green;
   fillAlphas:1,1;
    textRollOverColor:white;
    textSelectedColor:white;
    themeColor:black;
   
     /*指定文字的位置*/
    paddingLeft: 130; /* pixels */

  }
  .accHeader{
     fillColors:haloSiler,haloBlue;
     filAlphas:1.0,0.5;
     selectedFillColors:black,black;
  }
 </mx:Style>
<mx:Script>
   <![CDATA[
    import mx.controls.Button;

      //设置外观的图片信息
        private var  maxChild:int=100;
        [Embed("../images/image-1.jpg")]
            private const RedIcon:Class;
 
            [Embed("../images/image-2.jpg")]
            private const OrangeIcon:Class;
 
            [Embed("../images/image-3.jpg")]
            private const YellowIcon:Class;
 
            [Embed("../images/image-4.jpg")]
            private const GreenIcon:Class;
 
            [Embed("../images/image-5.jpg")]
            private const BlueIcon:Class;
 
            [Embed("../images/image-6.jpg")]
            private const StarIcon:Class;
           
            private function init():void
            {
              var idx:uint;
              var length:uint=accordion.numChildren;
              var btn:Button;
              //分割按钮样式的图标
              for(idx=0;idx<length;idx++)
              {
                    btn = accordion.getHeaderAt(idx);
                    btn.useHandCursor = true;
                    btn.buttonMode = true;
                    btn.setStyle("selectedUpIcon", StarIcon);
                    btn.setStyle("selectedOverIcon", StarIcon);
                    btn.setStyle("selectedDownIcon", StarIcon);
              }
             
              //设置头部的文字的颜色
              this.accordion.getHeaderAt(0).setStyle("color","red");
              this.accordion.getHeaderAt(1).setStyle("color","haloOrange");
              this.accordion.getHeaderAt(2).setStyle("color","yellow");
              this.accordion.getHeaderAt(3).setStyle("color","haloGreen");
             
            }
            //动态添加子条目
            private function accordion_addChild():void
            {
              if(this.accordion.numChildren<this.maxChild)
              {
                var vbox:VBox=new VBox();
                vbox.label="child"+accordion.numChildren;
                vbox.percentHeight=100;
                vbox.percentWidth=100;
                var randColor:uint=Math.random()*0xFFFFF;
                vbox.setStyle("backgroundColor",randColor);
                this.accordion.addChild(vbox);
              }
            }
            //动态删除子条目
        private function accordion_removeChild():void
            {
             if(this.accordion.selectedChild)
             {
               this.accordion.removeChild(this.accordion.selectedChild);
             }
            }
    
   ]]>
  </mx:Script>
    <mx:Panel >
     <mx:Accordion id="accordion" openDuration="0"  headerStyleName="accHeader" backgroundAlpha="0.0"
  width="134" height="401" creationComplete="init()" y="10">
     <mx:headerRenderer>
            <mx:Component>
                <mx:Button fontWeight="normal"
                        labelPlacement="left"
                        textAlign="left"
                        cornerRadius="{outerDocument.accordion.getStyle('headerHeight')/2}" />
            </mx:Component>
        </mx:headerRenderer>
  <mx:VBox id="orangeVbox"  label="Orange" icon="{OrangeIcon}"/>
  <mx:VBox id="yellowVbox"  label="yellow" icon="{YellowIcon}"/>
  <mx:VBox id="greenVbox"  label="green" icon="{GreenIcon}"/>
  <mx:VBox id="blueVbox"  label="blue" icon="{BlueIcon}"/>
 </mx:Accordion>
     <mx:Button label="remove" id="removeChildBtn" click="accordion_removeChild()"/>
 
 <mx:Button label="Add" id="aadChildbtn" click="accordion_addChild()"/>
    </mx:Panel>
 
</mx:Canvas>