如何在 flex 中自定义一个 HSlider？答案

【问题标题】：How to customise a HSlider in flex?如何在 flex 中自定义一个 HSlider？
【发布时间】：2012-05-13 16:30:40
【问题描述】：

我是 flex 新手，我想改变 HSlider 的图像，像这样

我该怎么办？请给我一个简单的例子。

【问题讨论】：

我认为这是一个很好的问题，如果您只是将标题更改为“如何在 flex 中使用一个皮肤组件”。 HSlider 是一个很好的蒙皮示例，因为它既不简单，也不太复杂。

【解决方案1】：

@RIAstar 给出了很好的答案。但是有一个小问题——拇指前的这个橙色部分。 AFAIK 创建这样的皮肤的最简单方法是在 HSlider 皮肤中添加矩形或更复杂的图形，这将根据拇指的 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" />

【讨论】：

【解决方案2】：

您必须创建自定义皮肤。现在，HSlider 有点特别，因为它有一些也可以换肤的子组件。您实际上必须创建三个自定义皮肤：

一个用于 HSlider 本身（此皮肤包括工具提示）
一个用于轨道（图片中的黄色/棕色区域）
还有一个供拇指使用

轨道和拇指实际上都是按钮，所以这些皮肤必须是按钮皮肤。

解释整个过程会使这个答案过于冗长和具体，所以我只是让你开始。你应该能够从那里弄清楚。我还假设您将 FlashBuilder 用作 IDE。

创建主皮肤

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

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

创建轨道和拇指皮肤

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

编辑皮肤

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

【讨论】：

酷！谢谢！我不知道 HSlider 有子组件。