如何在flex中自定义HSlider？

Question

我是初学者，我想改变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。

创建主要内容

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

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

创建曲目和拇指皮肤

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

的副本

编辑皮肤

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