apache-flex - 带有两个拇指的Flex 4滑块

有人知道如何用两个拇指在Flex 4( Spark )中制作自定义hslider吗？从Flex 4开始，滑块组件的thumbcount属性不再可用(在mx组件上，它很容易设置)。我必须设置轨道和拇指的样式。

一个教程会很好。

谢谢，
晚礼服

最佳答案

我没有完整的教程供您引用，但是这里是创建自定义hslider组件的前几个步骤。希望能帮助到你。

首先看一下由两部分组成的hslider皮肤:一个拇指和一个轨道:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11"
              skinClass="spark.skins.spark.HSliderThumbSkin" />

现在，创建一个新皮肤，除了给它两个按钮:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
                  skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11"
                  skinClass="spark.skins.spark.HSliderThumbSkin" />
<s:Button id="thumb2" top="0" bottom="0" width="11" height="11"
                  skinClass="spark.skins.spark.HSliderThumbSkin" />

创建一个扩展HSlider的新组件，并将其命名为MultiButtonSlider。覆盖partAdded()函数，并在添加thumb2时获取对它的引用。

override protected function partAdded(partName:String, instance:Object):void{
if(partName == "thumb2"){
    thumb2 = instance as Button;
}
}

希望这可以引导您朝正确的方向发展。不要忘记设置MultiButtonSlider.skinClass =“YourNewSkin”

下一步将是使其可拖动并将其点转换为值。请参见HSlider.pointToValue()函数。