Flex 4滑块有两个拇指

Question

有谁知道如何用两个拇指在Flex 4(火花)中制作自定义hslider？由于Flex 4滑块组件的thumbcount属性不再可用(在mx组件上很容易设置).我必须设计轨道和拇指的样式.

教程会很好.

thx,tux.

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() 函数。