flex4 为垂直滚动条VScrollBar换肤

最新推荐文章于 2024-05-27 07:40:40 发布

iteye_8753

最新推荐文章于 2024-05-27 07:40:40 发布

阅读量351

点赞数

分类专栏： Flex示例文章标签： flex 皮肤滚动条

Flex示例专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何为 Flash 中的垂直滚动条进行换肤操作。通过修改 CSS 设置及自定义 VScrollBarSkin，实现了滚动条外观的自定义。文章包括设置 fixedThumbSize 参数以及编写按钮皮肤等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为垂直滚动条换肤是一件比较麻烦的事情。且让我们一步一步来实现。

首先，由于它只是Scroller的一部分，要直接给它设置样式需要在css文件里这样写：


s|Scroller s|VScrollBar
{
	skinClass:ClassReference("com.views.skins.VScrollBarSkin");
	fixedThumbSize:true;
}

这里设置fixedThumbSize为true是因为滑块使用了一个固定的图片，如果false会导致内部计算错误。

然后，我们看下皮肤具体应该怎么写，首先打开spark.skins.spark.VScrollBarSkin（可以用打开类型快捷键ctrl+shift+t，输入VScrollBarSkin）


    <!---  The default skin class is VScrollBarTrackSkin.  
            @copy spark.components.supportClasses.TrackBase#track 
            @see spark.skins.spark.VScrollBarTrackSkin -->
    <s:Button id="track" top="16" bottom="15" height="54"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.VScrollBarTrackSkin" />

    <!--- The default skin class is VScrollBarThumbSkin.
            @copy spark.components.supportClasses.TrackBase#thumb 
            @see spark.skins.spark.VScrollBarThumbSkin -->
    <s:Button id="thumb" 
              focusEnabled="false" visible.inactive="false" tabEnabled="false"
              skinClass="spark.skins.spark.VScrollBarThumbSkin" />

    <!--- The default skin class is ScrollBarUpButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#decrementButton 
            @see spark.skins.spark.ScrollBarUpButtonSkin -->
    <s:Button id="decrementButton" top="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />

    <!---  The default skin class is ScrollBarDownButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#incrementButton
            @see spark.skins.spark.ScrollBarDownButtonSkin -->
    <s:Button id="incrementButton" bottom="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />

上面这是直接从VScrollBarSkin复制出来的。看起来很简单，不是吗，就是4个按钮，分别代表向上向下以及滑块与滑轨。而实际上我们需要改的就是这4个按钮的皮肤。

接下来就简单了，分别书写相应的按钮皮肤，并用它们替换掉默认的按钮皮肤即可。

[b]需要注意的是要给皮肤里的各部分设置宽高！[/b]
具体的皮肤文件可以参考附件