apache-flex - 如何在 flex 中自定义一个 HSlider？

Question

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

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

Answer 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" />

Answer 2

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

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

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

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

创建主皮肤

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

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

创建轨道和拇指皮肤

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

编辑皮肤

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