Flex：HSlider - 为不同的拇指设置不同的皮肤？

Question

我将使用 HSlider 来设置一系列值。 我希望左手拇指看起来像 ( ，而右手拇指看起来像 ) 这样它们看起来就包含了像 (range) 这样的范围而不是|范围|。 我只知道如何设置 SliderThumb 的皮肤，这将为两者设置皮肤。 有谁知道如何为每个拇指设置不同的皮肤？

谢谢。

更新

我现在有这个代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
    .thumbTickLeft
    {
        disabledSkin: Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin");
        downSkin: Embed(source="skins.swf", symbol="thumbTickLeft_downSkin");
        overSkin: Embed(source="skins.swf", symbol="thumbTickLeft_overSkin");
        upSkin: Embed(source="skins.swf", symbol="thumbTickLeft_upSkin");
    }
    .thumbTickRight
    {
        disabledSkin: Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin");
        downSkin: Embed(source="skins.swf", symbol="thumbTickRight_downSkin");
        overSkin: Embed(source="skins.swf", symbol="thumbTickRight_overSkin");
        upSkin: Embed(source="skins.swf", symbol="thumbTickRight_upSkin");
    }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            override protected function commitProperties():void
            {
                super.commitProperties();

                updateThumbSkins();   
            }

            private function updateThumbSkins():void
            {
                this.getThumbAt(0).setStyle('styleName','thumbTickLeft');
                this.getThumbAt(1).setStyle('styleName','thumbTickRight');
            }
        ]]>
    </mx:Script>


</mx:HSlider>

拇指刻度根本不显示？ 顺便说一句，我已经确保皮肤正确加载，因为我可以将它们设置为如下按钮：

<mx:Button styleName="thumbTickRight"/>

Answer 1

好吧，我能够让它以这种方式工作......不确定这是否是最好的方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    sliderThumbClass="RangeSliderThumb" 
    creationComplete="initThumbs()">

    <mx:Script>
        <![CDATA[
            import mx.controls.sliderClasses.SliderThumb;

            [Embed(source="skins.swf", symbol="thumbTickLeft_upSkin")]
            private var leftUp:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_upSkin")]
            private var rightUp:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_downSkin")]
            private var leftDown:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_downSkin")]
            private var rightDown:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_overSkin")]
            private var leftOver:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_overSkin")]
            private var rightOver:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin")]
            private var leftDisabled:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin")]
            private var rightDisabled:Class;

            private function initThumbs():void 
            {
                this.thumbCount = 2;

                var thumb1:SliderThumb = this.getThumbAt(0);
                thumb1.setStyle("thumbUpSkin", leftUp);
                thumb1.setStyle("thumbDownSkin", leftDown);
                thumb1.setStyle("thumbOverSkin", leftOver);
                thumb1.setStyle("thumbDisabledSkin", leftDisabled);

                var thumb2:SliderThumb = this.getThumbAt(1);
                thumb2.setStyle("thumbUpSkin", rightUp);
                thumb2.setStyle("thumbDownSkin", rightDown);
                thumb2.setStyle("thumbOverSkin", rightOver);
                thumb2.setStyle("thumbDisabledSkin", rightDisabled);
            }
        ]]>
    </mx:Script>

</mx:HSlider>

Answer 2

你可能不会再读到这篇文章，但为了其他人的利益，他们和我试图操纵多个拇指以使其具有不同的皮肤一样痛苦，我想我会指出你在原始代码中出错的地方。 我按照您的原始代码示例进行操作，但也无法渲染拇指，然后我明白了为什么您的最终解决方案有效。

问题是，在原始代码中，您使用的是样式属性 upSkin、downSkin 等，而在有效的代码中，您使用的是thumbUpSkin、thumbDownSkin 等。细微的变化，但它带来了所有的不同！

希望这可以帮助某人挽救一天的生命......;-)

干杯
德鲁

Answer 3

我认为您可以通过子类化 Slider 类（或 HSlider）并添加一种方法来将皮肤单独应用于每个拇指来实现此目的。

在 Slider.as 中有一个名为 createThumbs 的方法。 如果你查一下，你会发现当创建一个拇指时，它的皮肤是根据为 thumbUpSkin 设置的内容分配给它的，等等。

thumb = SliderThumb(new _thumbClass());

thumb.owner = this;
thumb.styleName = new StyleProxy(this, thumbStyleFilters);
thumb.thumbIndex = i;
thumb.visible = true;
thumb.enabled = enabled;

thumb.upSkinName = "thumbUpSkin";
thumb.downSkinName = "thumbDownSkin";
thumb.disabledSkinName = "thumbDisabledSkin";
thumb.overSkinName = "thumbOverSkin";
thumb.skinName = "thumbSkin";

因此，你可以创建一个名为 skinThumbs 并让它覆盖 createThumbs 中应用的皮肤设置。 您可以通过调用 getThumbAt(int) 来获取每个拇指。 如果您需要帮助覆盖皮肤设置，请给我留言。

我将覆盖 commitProperties 方法并从那里调用 skinThumbs - 只需确保在调用 super 之后调用 skinThumbs .commitProperties。 顺便说一句，createThumbs 方法仅从 commitProperties 调用，并且仅从 commitProperties 中的一个位置调用，因此您不必担心关于处理您的修改被另一个内部调用 createThumbs 替换的情况。