apache-flex - 带两个拇指的 Flex 4 slider

Question

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

有教程就好了。

谢谢，
晚礼服。

Answer 1

我没有完整的教程，但这里是创建自定义 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() 函数。