通过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:Cla***eference("skins.AccordionHeaderSkin") */
- skin:Cla***eference("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。。
转载于:https://blog.51cto.com/aqqle/881211