Remove hover gray shade from flex spark button
I create a new skin for a spark button, starting from the default button skin. Then I remove all the layers in the skin, except the text layer. If I use a button with this skin normally, everything is OK. If I put the button in an ItemRenderer, when I hover one of the buttons, it gets a shade of gray. Here's a code sample.
The skin:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
&开发者_运维知识库lt;s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
The code where I use it:
<s:applicationComplete>
<![CDATA[
dg.dataProvider = new ArrayList(['but1', 'but2']);
]]>
</s:applicationComplete>
<s:DataGroup id="dg">
<s:layout>
<s:HorizontalLayout gap="0" />
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Button skinClass="Test" label="{data}" width="200" height="50"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
How can I stop this from happening?
It was caused by the item renderer. I added this and it works:
<s:ItemRenderer>
<fx:Script>
<![CDATA[
override protected function get hovered():Boolean {
return false;
}
]]>
</fx:Script>
<s:Button skinClass="Test" label="{data}" width="200" height="50"/>
</s:ItemRenderer>
Is there a better, more elegant way?
精彩评论