如何在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。

创造主要皮肤

在HSlider上设置skinClass样式HSlider Alt + Space。 这将导致代码完成，但您也可以选择“创建皮肤...”。

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

创建轨迹和拇指皮肤

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

编辑皮肤

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