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

Question

我将使用 HSlider 来设置一系列值。我希望左手拇指看起来像 ( 和右手拇指看起来像 ) 这样它们似乎包含像 (range) 这样的范围而不是 |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.commitProperties 之后调用skinThumbs。顺便说一句，createThumbs 方法仅从 commitProperties 调用，并且仅从 commitProperties 中的一个位置调用，因此您不必担心您的修改会被另一个对 createThumbs 的内部调用替换.