（转）Flex4中的皮肤（2）：Skin State 小宝马的爸爸

在上一篇 中，定义了一个最简单的SkinnableComponent并为其定义了两个Skin。

对于TransitionSkin，需要在enable时有不同的展现方式，这可以通过Skin State实现。

对自定义的SkinnableComponent的修改

首先在组件中定义isEnabled属性：

 

view plaincopy to clipboardprint?
  1. private var _isEnabled:Boolean = false;   
  2.            
  3.         public function get isEnabled():Boolean   
  4.         {   
  5.             return _isEnabled;   
  6.         }   
  7.            
  8.         public function set isEnabled(value:Boolean):void  
  9.         {   
  10.             _isEnabled = value;   
  11.         }  

 

然后定义SkinState元标签：

 

view plaincopy to clipboardprint?
  1. [SkinState("normal")]   
  2. [SkinState("enable")]  

 

最后需要将属性值和组件状态关联起来，这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。

该方法的最初定义如下：

 

view plaincopy to clipboardprint?
  1. /**  
  2.      *  Returns the name of the state to be applied to the skin. For example, a  
  3.      *  Button component could return the String "up", "down", "over", or "disabled"  
  4.      *  to specify the state.  
  5.      *  
  6.      *  <p>A subclass of SkinnableComponent must override this method to return a value.</p>  
  7.      *  
  8.      *  @return A string specifying the name of the state to apply to the skin.  
  9.      *   
  10.      *  @langversion 3.0  
  11.      *  @playerversion Flash 10  
  12.      *  @playerversion AIR 1.5  
  13.      *  @productversion Flex 4  
  14.      */  
  15.     protected function getCurrentSkinState():String   
  16.     {   
  17.         return null;   
  18.     }  

 

在Node中需要覆盖该方法：

 

view plaincopy to clipboardprint?
  1. override protected function getCurrentSkinState():String   
  2.         {   
  3.             if(isEnabled)   
  4.                 return "enable";   
  5.             return "normal";   
  6.         }  

 

完整的Node代码如下：

Node.as

 

view plaincopy to clipboardprint?
  1. package skinsample   
  2. {   
  3.     [SkinState("normal")]   
  4.     [SkinState("enable")]   
  5.     import spark.components.supportClasses.SkinnableComponent;   
  6.        
  7.     public class Node extends SkinnableComponent   
  8.     {   
  9.            
  10.         public function Node()   
  11.         {   
  12.             super();   
  13.         }   
  14.            
  15.            
  16.         private var _isEnabled:Boolean = false;   
  17.            
  18.         public function get isEnabled():Boolean   
  19.         {   
  20.             return _isEnabled;   
  21.         }   
  22.            
  23.         public function set isEnabled(value:Boolean):void  
  24.         {   
  25.             _isEnabled = value;   
  26.         }   
  27.            
  28.         override protected function getCurrentSkinState():String   
  29.         {   
  30.             if(isEnabled)   
  31.                 return "enable";   
  32.             return "normal";   
  33.         }   
  34.     }   
  35. }  

 

对Skin的修改

Skin中首先需要增加状态的声明：

view plaincopy to clipboardprint?
  1. <s:states>  
  2.     <s:State name="normal" />  
  3.     <s:State name="enable" />  
  4. </s:states>  

接下来可以指定Skin元素在哪个状态中出现，默认是在所有状态中出现。XML节点和属性都可以进行指定。

对于XML节点，增加includeIn属性，如：

<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />

对于XML属性，增加 属性名称.状态名称 指定特定状态下的属性值，如：

<s:SolidColor color="0x131313" color.enable="0xff0000" />

完整的Skin代码如下：

TransitionSkin.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">  
  3.     <s:states>  
  4.         <s:State name="normal" />  
  5.         <s:State name="enable" />  
  6.     </s:states>  
  7.     <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"    
  8.          bottom="0" left="0">  
  9.         <s:fill>  
  10.            <s:SolidColor color="0x131313" color.enable="0xff0000" />  
  11.         </s:fill>  
  12.         <s:stroke>  
  13.            <s:SolidColorStroke color="0x131313" weight="2"/>              
  14.         </s:stroke>  
  15.     </s:Rect>  
  16.     <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/>  
  17. </s:Skin>  

PlaceSkin.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">  
  3.     <s:states>  
  4.         <s:State name="normal" />  
  5.         <s:State name="enable" />  
  6.     </s:states>  
  7.     <s:Ellipse id="ellipse"  top="0" right="0" bottom="0" left="0">  
  8.         <s:fill>  
  9.            <s:SolidColor color="0x77CC22" />  
  10.         </s:fill>  
  11.         <s:stroke>  
  12.            <s:SolidColorStroke color="0x131313" weight="2"/>  
  13.         </s:stroke>  
  14.     </s:Ellipse>  
  15. </s:Skin>  

使用具有状态的组件和Skin

定义好组件和Skin后，就可以使用了：

NodeSample.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <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/halo" xmlns:skinsample="skinsample.*">  
  3.     <fx:Script>  
  4.         <!--[CDATA[   
  5.             import skinsample.TransitionSkin;   
  6.         ]]-->  
  7.     </fx:Script>  
  8.     <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/>  
  9.     <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/>  
  10.     <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/>  
  11.        
  12. </s:WindowedApplication>  

运行效果：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gisera/p/1919110.html