如何解决禁用状态时,将过渡状态添加到“ Spark Button”火花按钮
|| 我需要向“ Spark”按钮的禁用状态添加过渡效果。这样,用户可以将鼠标悬停在该按钮上,并知道为什么禁用该按钮。 我认为我必须重写ButtonBase的getCurrentSkinState。无论如何,有没有测试鼠标光标是否位于禁用按钮上方的信息? 谢谢。解决方法
尝试使用以下内容:
package
{
import spark.components.Button;
[SkinState(\"overDisabled\")]
public class ButtonWithOverInDisabled extends Button
{
private var _enabledInvalidaationPhase:Boolean = false;
private var _explicitMouseChildren:Boolean = true;
private var _explicitMouseEnabled:Boolean = true;
override public function get enabled():Boolean
{
if (_enabledInvalidaationPhase)
return true;
return super.enabled;
}
override public function set enabled(value:Boolean):void
{
_enabledInvalidaationPhase = true;
super.enabled = value;
super.mouseChildren = _explicitMouseChildren;
super.mouseEnabled = _explicitMouseEnabled;
_enabledInvalidaationPhase = false;
}
override public function set mouseChildren(value:Boolean):void
{
super.mouseChildren = value;
_explicitMouseChildren = value;
}
override public function set mouseEnabled(value:Boolean):void
{
super.mouseEnabled = value;
_explicitMouseEnabled = value;
}
override protected function getCurrentSkinState():String
{
if ((hovered || mouseCaptured) && !enabled)
return \"overDisabled\";
return super.getCurrentSkinState();
}
}
}
火花皮肤可能如下所示:
<?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\"
xmlns:fb=\"http://ns.adobe.com/flashbuilder/2009\" minWidth=\"21\" minHeight=\"21\" alpha.disabledState=\"0.5\">
<fx:Metadata>[HostComponent(\"ButtonWithOverInDisabled\")]</fx:Metadata>
<fx:Script fb:purpose=\"styling\">
<![CDATA[
/* Define the skin elements that should not be colorized.
For button,the graphics are colorized but the label is not. */
static private const exclusions:Array = [\"labelDisplay\"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number) : void
{
var cr:Number = getStyle(\"cornerRadius\");
if (cornerRadius != cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
if (highlightStroke) highlightStroke.radiusX = cornerRadius;
if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name=\"up\" />
<s:State name=\"over\" stateGroups=\"overState\" />
<s:State name=\"down\" />
<s:State name=\"disabled\" stateGroups=\"disabledState\" />
<s:State name=\"overDisabled\" stateGroups=\"overState,disabledState\" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id=\"shadow\" left=\"-1\" right=\"-1\" top=\"-1\" bottom=\"-1\" radiusX=\"2\">
<s:fill>
<s:LinearGradient rotation=\"90\">
<s:GradientEntry color=\"0x000000\"
color.down=\"0xFFFFFF\"
alpha=\"0.01\"
alpha.down=\"0\" />
<s:GradientEntry color=\"0x000000\"
color.down=\"0xFFFFFF\"
alpha=\"0.07\"
alpha.down=\"0.5\" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id=\"fill\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
<s:fill>
<s:LinearGradient rotation=\"90\">
<s:GradientEntry color=\"0xFFFFFF\"
color.overState=\"0xBBBDBD\"
color.down=\"0xAAAAAA\"
alpha=\"0.85\" />
<s:GradientEntry color=\"0xD8D8D8\"
color.overState=\"0x9FA0A1\"
color.down=\"0x929496\"
alpha=\"0.85\" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id=\"lowlight\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
<s:fill>
<s:LinearGradient rotation=\"270\">
<s:GradientEntry color=\"0x000000\" ratio=\"0.0\" alpha=\"0.0627\" />
<s:GradientEntry color=\"0x000000\" ratio=\"0.48\" alpha=\"0.0099\" />
<s:GradientEntry color=\"0x000000\" ratio=\"0.48001\" alpha=\"0\" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id=\"highlight\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
<s:fill>
<s:LinearGradient rotation=\"90\">
<s:GradientEntry color=\"0xFFFFFF\"
ratio=\"0.0\"
alpha=\"0.33\"
alpha.overState=\"0.22\"
alpha.down=\"0.12\"/>
<s:GradientEntry color=\"0xFFFFFF\"
ratio=\"0.48\"
alpha=\"0.33\"
alpha.overState=\"0.22\"
alpha.down=\"0.12\" />
<s:GradientEntry color=\"0xFFFFFF\"
ratio=\"0.48001\"
alpha=\"0\" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id=\"highlightStroke\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\" excludeFrom=\"down\">
<s:stroke>
<s:LinearGradientStroke rotation=\"90\" weight=\"1\">
<s:GradientEntry color=\"0xFFFFFF\" alpha.overState=\"0.22\" />
<s:GradientEntry color=\"0xD8D8D8\" alpha.overState=\"0.22\" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id=\"hldownstroke1\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\" includeIn=\"down\">
<s:stroke>
<s:LinearGradientStroke rotation=\"90\" weight=\"1\">
<s:GradientEntry color=\"0x000000\" alpha=\"0.25\" ratio=\"0.0\" />
<s:GradientEntry color=\"0x000000\" alpha=\"0.25\" ratio=\"0.001\" />
<s:GradientEntry color=\"0x000000\" alpha=\"0.07\" ratio=\"0.0011\" />
<s:GradientEntry color=\"0x000000\" alpha=\"0.07\" ratio=\"0.965\" />
<s:GradientEntry color=\"0x000000\" alpha=\"0.00\" ratio=\"0.9651\" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id=\"hldownstroke2\" left=\"2\" right=\"2\" top=\"2\" bottom=\"2\" radiusX=\"2\" includeIn=\"down\">
<s:stroke>
<s:LinearGradientStroke rotation=\"90\" weight=\"1\">
<s:GradientEntry color=\"0x000000\" alpha=\"0.09\" ratio=\"0.0\" />
<s:GradientEntry color=\"0x000000\" alpha=\"0.00\" ratio=\"0.0001\" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn\'t disappear when scale is less than 1 -->
<!--- @private -->
<s:Rect id=\"border\" left=\"0\" right=\"0\" top=\"0\" bottom=\"0\" width=\"69\" height=\"20\" radiusX=\"2\">
<s:stroke>
<s:LinearGradientStroke rotation=\"90\" weight=\"1\">
<s:GradientEntry color=\"0x000000\"
alpha=\"0.5625\"
alpha.down=\"0.6375\" />
<s:GradientEntry color=\"0x000000\"
alpha=\"0.75\"
alpha.down=\"0.85\" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- 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>
</s:SparkSkin>
希望这可以帮助! :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。