Flex 4.5でMXMLスパークボタンスキンを作成しました。これは、ダウン状態では、 colorizeExclusions配列(現在、ボタンのテキストラベルとハイライトを保護している)を無視することを除いて、うまく機能しているようです。アップ状態とダウン状態の唯一の違いは、ダウン状態で内側のドロップシャドウを適用していることです。
私は新しいユーザーなので、StackOverflowでは画像を投稿できません。他の場所に投稿しました。
2番目の画像で、ハイライトとテキストが青色でどのように色付けされているかを確認してください。それはまったく間違っています。
この内側の影に状態制限を設定しない場合、同じ問題が発生します。colorizeExclusionsが無視されるため、状態や状態固有のCSS( 、この場合、とにかく)。
ボタンのスキンコードは次のとおりです。
<?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:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:fxg="assets.fxg.*"
minWidth="18" minHeight="18"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
/* 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", "highlight"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Group left="0" right="0" top="0" bottom="0">
<!-- Background -->
<s:Group id="background" left="0" right="0" top="0" bottom="0">
<fxg:GlassButtonBack excludeFrom="over" left="0" right="0" top="0" bottom="0"/>
<fxg:GlassButtonBackBright includeIn="over" left="0" right="0" top="0" bottom="0"/>
</s:Group>
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay" left="16" right="16" top="8" bottom="8"
fontWeight="bold" horizontalCenter="0" maxDisplayedLines="1" textAlign="center"
verticalAlign="middle" verticalCenter="1"/>
<s:Rect id="highlight" left="3" right="3" top="3" height="40%" radiusX="6" radiusY="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:entries>
<s:GradientEntry ratio="0" alpha="0.9" color="#FFFFFF" />
<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF" />
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:filters>
<s:DropShadowFilter includeIn="down" inner="true" color="#000000" blurX="10" blurY="10" angle="90"/>
</s:filters>
</s:Group>
一体何がここで起こっているのか誰かが知っていますか?これはFlexのバグですか?回避策はありますか?私は愚かなことをしましたか?ここで、私は本当に途方に暮れています。