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="22222"??width="200"?height="200"?verticalAlign="middle"?horizontalAlign="center"?backgroundColor="#F6F8FC">? ?

  
  

????????????????<s:Button?label="222221"/>?

  
  

????????????</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。。