如何在flex中自定义HSlider？

Question

我是flex的新手,我想改变HSlider的形象,就像这样

我该怎么办？请举个简单的例子.

Answer 1

@RIAstar有一个很好的答案.但是有一点问题 - 拇指之前的橙色部分.AFAIK创建这样的皮肤的最简单方法是在HSlider皮肤中添加rect或更复杂的图形,这将根据拇指的x坐标改变它的宽度,即

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

<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}">
    <s:fill>
        <s:SolidColor color="0x00FF00" />
    </s:fill>
</s:Rect>

<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderThumbSkin" />

Answer 2

你必须创建一个自定义皮肤.现在,HSlider有点特别之处在于它有一些也可以换肤的子组件.你实际上必须创建三个自定义皮肤:

• 一个用于HSlider本身(这个皮肤包括工具提示)
• 一个用于轨道(图片中的黄色/棕色区域)
• 一个用于拇指

轨道和拇指实际上都是按钮,因此这些外观必须是按钮外观.

解释整个过程将使这个答案过于冗长和具体,所以我会让你开始.你应该能够从那里弄明白.我还假设你使用FlashBuilder作为IDE.

创造主要皮肤

在a skinClass上设置样式HSlider并按Alt + Space.这将导致代码完成,但您也可以选择"创建皮肤...".

选择它,将出现一个向导.填写如下内容.请注意,我们正在制作默认Spark HSlider外观的副本.我们删除样式代码,因为在这样的自定义外观中不需要它.

创建轨迹和拇指皮肤

打开这个新皮肤类并向下滚动到底部.你会看到两个Button; 一个有id track,一个有id thumb.他们的skinClass样式设置为这些按钮的默认火花外观.删除的内容和重复前面的步骤(创建新皮肤)的操作,只是这一次创建的副本HSliderTrackSkin和HSliderThumbSkin

编辑皮肤

您现在拥有HSlider的默认Spark外观的精确副本(除了您删除了样式).现在您可以开始编辑:更改颜色,更改形状等.如果您需要有关Flex图形的更多信息,我建议您使用FXG.但你可以试着摆弄默认的皮肤,看看你能在哪里获得.