Question

我正在尝试在Spark滑块组件上使用拇指图像（嵌入式）。这应该是直截了当的 - 我知道在mx中要做什么 - 但我无法找到Spark语法。

我甚至不需要状态（上，下，上等），因为这是在移动应用程序上进行的。

有人知道吗？

感谢。

Answer 1

你的Spark Slider需要一个自定义皮肤类，那个皮肤需要一个SliderThumbSkin用于拇指。

Spark Slider ：

<?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 - Spark 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>

在这里，我用拇指替换了拇指：

Spark slider skinned with Google logo image

其他信息

这些皮肤可以使用Flash Builder的内容辅助自动生成[CTRL / COMMAND + SPACE]在skinClass=""的引号内显示：

Create skin context menu

这将打开一个对话框来创建一个新的MXML皮肤：

New skin

默认外观在SDK中按主题。对于Spark来说，它就像是：

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>

使用图像设置Spark组件的样式

1 个答案: