使用圖像設置Spark組件

Question

我試圖在我的Spark滑塊組件上使用圖像（嵌入）用於拇指。這應該很簡單 - 我知道在mx中該怎麼做 - 但是我一直無法找到Spark語法。

我甚至不需要狀態（上，下，上，等），因爲這是一個移動應用程序。

有誰知道嗎？

謝謝。

Answer 1

您的Spark Slider需要一個自定義外觀類，並且該外觀需要拇指的SliderThumbSkin。

星火滑塊：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <s:VSlider skinClass="SliderSkin" /> 

</s:Application> 

SliderSkin - 星火Slider的皮膚類需要一個拇指皮膚：

<!--- The default skin class is VSliderThumbSkin. 
     @copy spark.components.supportClasses.TrackBase#thumb 
     @see spark.skins.spark.VSliderThumbSkin --> 
<s:Button id="thumb" left="0" right="0" width="11" height="11" 
      tabEnabled="false" 
      skinClass="SliderThumbSkin" /> 

這是對VSliderSkin唯一的變化。如果您需要整個皮膚代碼，請參閱本答案的「附加信息」部分。

SliderThumbSkin - 拇指皮膚的按鈕，拇指需要圖像皮膚：

<?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" 
        minWidth="21" 
        minHeight="21" 
        alpha.disabled="0.5"> 

    <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" /> 
     <s:State name="down" /> 
     <s:State name="disabled" /> 
    </s:states> 

    <s:Image source.up="https://www.google.com/intl/en_com/images/srpr/logo3w.png" 
      source.over="https://www.google.com/intl/en_com/images/srpr/logo3w.png" 
      source.down="https://www.google.com/intl/en_com/images/srpr/logo3w.png" 
      source.disabled="https://www.google.com/intl/en_com/images/srpr/logo3w.png" 
      width="20" 
      height="20" /> 

</s:SparkButtonSkin> 

在這裏，我已經替換爲谷歌標誌大拇指：

其他信息

Thes Ë皮膚可以使用Flash Builder的含量[CTRL/COMMAND + SPACE]的skinClass=""出現這樣的引號內協助是自動生成的：

這將彈出一個對話框，以創建一個新的MXML皮膚：

默認外觀是由主題的SDK。火花它會是這樣的：

C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.1\frameworks\projects\spark\src\spark\skins\spark 

這裏是整個SliderSkin類

<?xml version="1.0" encoding="utf-8"?> 

<!-- 

    ADOBE SYSTEMS INCORPORATED 
    Copyright 2008 Adobe Systems Incorporated 
    All Rights Reserved. 

    NOTICE: Adobe permits you to use, modify, and distribute this file 
    in accordance with the terms of the license agreement accompanying it. 
--> 

<!--- The default skin class for the Spark VSlider component. The thumb and track skins are defined by the 
VSliderThumbSkin and VSliderTrackSkin classes, respectively. 

     @see spark.components.VSlider 
     @see spark.skins.spark.VSliderThumbSkin 
     @see spark.skins.spark.VSliderTrackSkin 

     @langversion 3.0 
     @playerversion Flash 10 
     @playerversion AIR 1.5 
     @productversion Flex 4 
--> 
<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="11" alpha.disabled="0.5"> 

    <fx:Metadata> 
    <![CDATA[ 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("spark.components.VSlider")] 
    ]]> 
    </fx:Metadata> 

    <fx:Script fb:purpose="styling"> 
     /* Define the skin elements that should not be colorized. 
      For slider, the skin itself is colorized but the individual parts are not. */ 
     static private const exclusions:Array = ["track", "thumb"]; 

     /** 
     * @private 
     */ 
     override public function get colorizeExclusions():Array {return exclusions;} 

     /** 
     * @private 
     */ 
     override protected function initializationComplete():void 
     { 
      useChromeColor = true; 
      super.initializationComplete(); 
     } 
    </fx:Script> 

    <fx:Script> 
     /** 
     * @private 
     */ 
     override protected function measure() : void 
     { 
      // Temporarily move the thumb to the top of the Slider so measurement 
      // doesn't factor in its y position. This allows resizing the 
      // VSlider to less than 100px in height. 
      var thumbPos:Number = thumb.getLayoutBoundsY(); 
      thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0); 
      super.measure(); 
      thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos); 
     } 
    </fx:Script> 

    <s:states> 
     <s:State name="normal" /> 
     <s:State name="disabled" /> 
    </s:states> 

    <fx:Declarations> 
     <!--- The tooltip used in the mx.controls.Slider control. 
       To customize the DataTip's appearance, create a custom VSliderSkin class. --> 
     <fx:Component id="dataTip"> 
      <s:DataRenderer minHeight="24" minWidth="40" x="20"> 
       <s:Rect top="0" left="0" right="0" bottom="0"> 
        <s:fill> 
         <s:SolidColor color="0x000000" alpha=".9"/> 
        </s:fill> 
        <s:filters> 
         <s:DropShadowFilter angle="90" color="0x999999" distance="3"/> 
        </s:filters> 
       </s:Rect> 
       <s:Label id="labelDisplay" text="{data}" 
         horizontalCenter="0" verticalCenter="1" 
         left="5" right="5" top="5" bottom="5" 
         textAlign="center" verticalAlign="middle" 
         fontWeight="normal" color="white" fontSize="11"> 
       </s:Label> 
      </s:DataRenderer> 
     </fx:Component> 
    </fx:Declarations> 

    <!--- The default skin class is VSliderTrackSkin. 
      @copy spark.components.supportClasses.TrackBase#track 
      @see spark.skins.spark.VSliderTrackSkin --> 
    <s:Button id="track" left="0" right="0" top="0" bottom="0" minHeight="33" height="100" 
       tabEnabled="false" 
       skinClass="spark.skins.spark.VSliderTrackSkin" /> 

    <!--- The default skin class is VSliderThumbSkin. 
      @copy spark.components.supportClasses.TrackBase#thumb 
      @see spark.skins.spark.VSliderThumbSkin --> 
    <s:Button id="thumb" left="0" right="0" width="11" height="11" 
       tabEnabled="false" 
       skinClass="SliderThumbSkin" /> 

</s:SparkSkin>