flex 学习笔记 accordion（二）

通过headerStyleName 为accordion的标题自定义样式：

代码：

1  mxml文件：

<?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="955" minHeight="600" xmlns:skins="skins.*"> 
    <fx:Declarations> 
        <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
    </fx:Declarations> 
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark";  
        @namespace mx "library://ns.adobe.com/flex/mx";  
        .accorhead{  
            /* skinClass:ClassReference("skins.AccordionHeaderSkin") */  
            skin:ClassReference("skins.AccordionHeaderSkin");  
        }  
    </fx:Style> 
    <mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center"> 
        <mx:Accordion headerStyleName="accorhead" paddingTop="-1"> 
            <mx:VBox label="11111"  width="200" height="200" verticalAlign="middle" horizontalAlign="center" backgroundColor="#F6F8FC">   
                <s:Button label="111111"/> 
            </mx:VBox> 
            <mx:VBox label="22222" width="200" height="200" verticalAlign="middle" horizontalAlign="center" backgroundColor="#F6F8FC"> 
                <s:Button label="222222"/> 
            </mx:VBox> 
            <mx:VBox label="33333" width="200" height="200" verticalAlign="middle" horizontalAlign="center" backgroundColor="#F6F8FC"> 
                <s:Button label="222222"/> 
            </mx:VBox> 
        </mx:Accordion> 
          
        <s:Button label="hahahaha" skinClass="skins.ButtonSkin"/> 
          
    </mx:VBox> 
</s:Application> 

其中包括了css样式，只有使用headerStyleName，为其指定一个css类 如上 .accorhead

然后在css类中给属性skin赋值（skinclass没有效果），指向一个自定义的皮肤文件

2  皮肤文件如下：

<?xml version="1.0" encoding="utf-8"?> 
    <s:SparkButtonSkin 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:spark="mx.skins.spark.*" width="400" height="300"> 
        <fx:Declarations> 
            <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
        </fx:Declarations> 
        <s:states>    
             <s:State name="up" />    
               <s:State name="over" />    
             <s:State name="down" />    
               <s:State name="disabled" />    
              <s:State name="selectedUp" />    
           <s:State name="selectedOver" />    
            <s:State name="selectedDown" />    
              <s:State name="selectedDisabled" />    
             </s:states>    
      
        <s:Rect height="25" left="1" right="1" top="1" bottom="1" id="fill"> 
            <s:fill> 
                <s:LinearGradient rotation="90"> 
                    <s:GradientEntry color="#DCE6EF" color.selectedUp="#F6F8FC"/> 
                    <s:GradientEntry color="#A2BBD5" color.selectedUp="#F6F8FC"/> 
                    <s:GradientEntry color="#99B4D1" color.selectedUp="#F6F8FC"/> 
                </s:LinearGradient> 
            </s:fill> 
        </s:Rect> 
        <s:Rect left="0" right="0" top="0" bottom="0" id="border"> 
            <s:stroke> 
                <s:SolidColorStroke color="#99B4D1" color.selectedUp="#000000"/> 
            </s:stroke> 
        </s:Rect> 
    </s:SparkButtonSkin> 

3 效果如下图所示：

 

 

 

学习ING。。