MXML：Spark 皮肤 VGroups 滚动条答案

【问题标题】：MXML: Spark skin a VGroups scrollbarMXML：Spark 皮肤 VGroups 滚动条
【发布时间】：2012-06-05 12:33:32
【问题描述】：

我有一个 VGRoup，如果内容太长，它会自动获取滚动条。

我想给滚动条换皮（让它变宽）。我该怎么做？

<s:Panel title="Replay" width="95%" height="860" top="920" horizontalCenter="0">
    <s:VGroup id="vgroup" left="10" right="10" top="10" bottom="10">
        <s:List id="list" height="100%" width="100%" itemRenderer="ListRenderer" />         
    </s:VGroup>
</s:Panel>

【问题讨论】：

你可以参考这个链接，这可能会有所帮助dgrigg.com/blog/2010/07/06/…

标签： flash apache-flex mxml

【解决方案1】：

首先，您应该知道获得滚动条的不是 VGroup，而是 List。组是没有任何视觉元素的布局组件。（在您显示的代码中，VGroup 也是多余的，但我想您可能出于这个问题的目的删除了一些不相关的代码。）

现在进行蒙皮：您可以通过创建自己的 Spark VScrollBarSkin 版本来做到这一点。如果您使用 FlashBuilder，请右键单击您的项目（或要在其中创建皮肤的包）；单击“新建 > MXML 皮肤”；在向导中填写spark.components.VScrollBar 作为主机组件并让它创建spark.skins.spark.VScrollBarSkin 的副本。

在您刚刚创建的类中，您会看到四个按钮，每个按钮都有自己的皮肤。一个是“向上滚动”按钮，另一个是“向下滚动”按钮，第三个是可点击的轨道（背景），最后一个是可以拖动的拇指。

您现在可以像使用 VScrollBarskin 一样为每个按钮创建自定义外观，但由于您只想调整宽度，因此可能没有必要。只需在每个按钮上设置一个明确的宽度就足够了。

现在要应用你的皮肤而不是默认皮肤，只需将它放在你的样式表中：

@namespace s "library://ns.adobe.com/flex/spark";

s|VScrollBar {
    skinClass: ClassReference("my.skins.VScrollBarSkin")
}

如果您希望它仅应用于列表滚动条，或者使用更具体的选择器：

s|List s|VScrollBar { ... }

【讨论】：

谢谢！使它更宽的css属性是什么？或者我在哪里可以找到有关 VScrollBars css 属性的文档？
@clamp VScrollBar 的css 属性当然可以在the docs 中找到，但是不能通过样式来应用大小。您将必须制作自定义皮肤。