接下来的Flex Gumbo中如何通过skinClass样式,去掉Spark Panel下拉阴影。
下面是main.mxml:<?xml version="1.0" encoding="utf-8"?> <s:Application name="Spark_Panel_skinClass_dropShadow_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Panel title="Spark Panel title" skinClass="skins.CustomPanelSkin_noDropShadow" width="200" horizontalCenter="0" verticalCenter="0"> <s:VGroup left="20" right="20" top="20" bottom="20"> <s:RichEditableText id="richEditableTxt" text="The quick brown fox jumps over the lazy dog." width="100%" height="100%" /> </s:VGroup> </s:Panel> </s:Application>
下面是CustomFxPanelSkin_noDropShadow.mxml的代码:<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin name="CustomPanelSkin_noDropShadow" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Panel")] ]]> </fx:Metadata> <fx:Script> /* Define the skin elements that should not be colorized. For panel, border and title backround are skinned, but the content area and title text are not. */ static private const exclusions:Array = ["background", "titleField", "contentGroup"]; override public function get colorizeExclusions():Array {return exclusions;} /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ static private const contentFill:Array = ["bgFill"]; override public function get contentItems():Array {return contentFill}; </fx:Script> <!-- layer 1: border --> <s:Rect left="0" right="0" top="0" bottom="0"> <s:stroke> <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> </s:stroke> </s:Rect> <!-- layer 2: background fill --> <!--- Defines the appearance of the PanelSkin class's background. --> <s:Rect id="background" left="1" top="1" right="1" bottom="1"> <s:fill> <!--- Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. --> <s:SolidColor color="0xFFFFFF" id="bgFill" /> </s:fill> </s:Rect> <!-- layer 3: title bar fill --> <s:Rect left="1" right="1" top="1" height="30"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xE2E2E2" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 4: title bar highlight --> <s:Rect left="1" right="1" top="1" height="30"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xEAEAEA" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <s:Rect left="1" right="1" top="31" height="1"> <s:fill> <s:SolidColor color="0xC0C0C0" /> </s:fill> </s:Rect> <!-- layer 5: text --> <!--- Defines the appearance of the PanelSkin class's title bar. --> <s:SimpleText id="titleField" lineBreak="explicit" left="10" right="4" top="2" height="30" verticalAlign="middle" fontWeight="bold" /> <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" /> </s:SparkSkin>