FLex的Spark主题下TabNavigator的Tab颜色与圆角效果

Main.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
??????? xmlns:s="library://ns.adobe.com/flex/spark"
??????? xmlns:mx="library://ns.adobe.com/flex/mx">
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?
?<fx:Style>
??@namespace s "library://ns.adobe.com/flex/spark";
??@namespace mx "library://ns.adobe.com/flex/mx";
??
??mx|TabNavigator {
???tabStyleName: "myTabs";
???firstTabStyleName: "myTabs";
???lastTabStyleName: "myTabs";
???selectedTabTextStyleName: "mySelectedTabs";
??}
??
??.myTabs {
???up-skin:ClassReference("TabNavigatorTabSkin");
???
???down-skin:ClassReference("TabNavigatorTabSkin");
???
???over-skin:ClassReference("TabNavigatorTabSkin");
???
???disabled-skin:ClassReference("TabNavigatorTabSkin");
???
???selected-up-skin:ClassReference("TabNavigatorTabSelectedSkin");
???
???selected-down-skin:ClassReference("TabNavigatorTabSelectedSkin");
???
???selected-over-skin:ClassReference("TabNavigatorTabSelectedSkin");
???
???selected-disabled-skin:ClassReference("TabNavigatorTabSelectedSkin");

???
??}
??
??.mySelectedTabs {
??}
?</fx:Style>
?
?<mx:TabNavigator x="120" y="70" width="200" height="200">
??<s:NavigatorContent width="100%" height="100%" label="列表基础模板">
??</s:NavigatorContent>
??<s:NavigatorContent width="100%" height="100%" label="输入框">
??</s:NavigatorContent>
?</mx:TabNavigator>
</s:WindowedApplication>

?

皮肤页面

TabNavigatorTabSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

?

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
???
??? minWidth="21" minHeight="21">
?
?<!-- layer 1: fill -->
?
?<s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
??
??<s:fill>
???
???<s:LinearGradient rotation="90">
????
????<s:GradientEntry color="0xf3f8fb" alpha="1" />
????
????<s:GradientEntry color="0xd3eaf8" alpha="1" />
????
???</s:LinearGradient>
???
??</s:fill>
??
?</s:Rect>
?
?
?<!-- layer 2: highlight stroke -->
?
?<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
??
??<s:stroke>
???
???<s:LinearGradientStroke rotation="90">
????
????<s:GradientEntry color="0xFFFFFF" alpha="1" />
????
????<s:GradientEntry color="0xD8D8D8" alpha="1" />
????
???</s:LinearGradientStroke>
???
??</s:stroke>
??
?</s:Rect>
?
?
?<!-- layer 3: fill highlight -->
?
?<s:Rect left="1" right="1" top="1" bottom="1"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
??
??<s:fill>
???
???<s:LinearGradient rotation="90">
????
????<s:GradientEntry color="0xFFFFFF"
????????
???????? ratio="0.0"
????????
???????? alpha="0.12"/>
????
????<s:GradientEntry color="0xFFFFFF"
????????
???????? ratio="0.48"
????????
???????? alpha="0.12" />
????
????<s:GradientEntry color="0xFFFFFF"
????????
???????? ratio="0.48001"
????????
???????? alpha="0" />
????
???</s:LinearGradient>
???
??</s:fill>
??
?</s:Rect>
?
?
?<!-- layer 4: border - unselected only -->
?
?<s:Rect left="0" right="0" top="0" bottom="0"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
??
??<s:stroke>
???
???<s:SolidColorStroke color="0xbed1d7" alpha="1" />
???
??</s:stroke>
??
?</s:Rect>
?
?
</s:SparkSkin>

?

TabNavigatorTabSelectedSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" ??? minWidth="21" minHeight="21"> ?<!-- layer 1: fill --> ?<s:Rect left="1" right="1" top="1" bottom="0"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:fill> ???<s:LinearGradient rotation="90"> ????<s:GradientEntry ?????color="0xd3f0fe" ?????alpha="1" /> ????<s:GradientEntry ?????color="0x67c4ed" ?????alpha="1" /> ???</s:LinearGradient> ??</s:fill> ?</s:Rect> ?<!-- layer 2: highlight stroke --> ?<s:Rect left="1" right="1" top="1" bottom="1" alpha="0"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:stroke> ???<s:LinearGradientStroke rotation="90"> ????<s:GradientEntry color="0xFFFFFF" alpha="1" /> ????<s:GradientEntry color="0xD8D8D8" alpha="1" /> ???</s:LinearGradientStroke> ??</s:stroke> ?</s:Rect> ?<!-- layer 3: fill highlight --> ?<s:Rect left="1" right="1" top="1" bottom="1"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:fill> ???<s:LinearGradient rotation="90"> ????<s:GradientEntry color="0xFFFFFF" ???????? ratio="0.0" ???????? alpha="0.12"/> ????<s:GradientEntry color="0xFFFFFF" ???????? ratio="0.48" ???????? alpha="0.12" /> ????<s:GradientEntry color="0xFFFFFF" ???????? ratio="0.48001" ???????? alpha="0" /> ???</s:LinearGradient> ??</s:fill> ?</s:Rect> ?<!-- layer 5: border - selected only --> ?<s:Rect left="0" width="1" top="0" bottom="0"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:fill> ???<s:SolidColor color="0x66a8c2" alpha="0" /> ??</s:fill> ?</s:Rect> ?<s:Rect left="1" right="1" top="0" height="1"? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:fill> ???<s:SolidColor color="0x66a8c2" alpha="0" /> ??</s:fill> ?</s:Rect> ?<s:Rect width="1" right="0" top="0" bottom="0"?? topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25"> ??<s:fill> ???<s:SolidColor color="0x66a8c2" alpha="0" /> ??</s:fill> ?</s:Rect> </s:SparkSkin>