flex 中设置滚动条的样式 (转)

flex样式, 个性化
在Flex中使用容器的时候，经常会遇到出现滚动条的情况，虽然官方提示的滚动条外观已经非常漂亮，但有个时候我们还是会有种修改滚动条外观的冲动，让我们的程序看起来更和谐些．
在Flex中，简单的修改控件的外观可以使用样式(Style)和皮肤 (skin)，这里修改滚动的外观也是如此．首先先来比较下修改前后的滚动条样式（以横向滚动条为例）．


　虽然我更改后的样式没有自带的漂亮,但是相信你一定可以把它弄的比较漂亮.以上自定义是通过以下代码实现的（代码写在外部的CSS文件中，如main.css中）．

   HScrollBar {
      downArrowUpSkin:Embed(source=”/assets/downArrow.png”);
      downArrowOverSkin:Embed(source=”/assets/downArrow.png”);
      downArrowDownSkin:Embed(source=”/assets/downArrow.png”);
      upArrowUpSkin:Embed(source=”/assets/upArrow.png”);
      upArrowOverSkin:Embed(source=”/assets/upArrow.png”);
      upArrowDownSkin:Embed(source=”/assets/upArrow.png”);
thumbDownSkin:
   Embed(source=”/assets/thumb.png”,
   scaleGridLeft=”7″, scaleGridTop=”5″,
   scaleGridRight=”8″, scaleGridBottom=”7″);
   thumbUpSkin:Embed(source=”/assets/thumb.png”,scaleGridLeft=”7″,scaleGridTop=”5″,
   scaleGridRight=”8″, scaleGridBottom=”7″);
   thumbOverSkin: Embed(source=”/assets/thumb.png”,scaleGridLeft=”7″, scaleGridTop=”5″, scaleGridRight=”8″, scaleGridBottom=”7″);
   trackSkin: Embed(source=”/assets/scrolltrack.png”,
 scaleGridLeft=”7″, scaleGridTop=”4″, scaleGridRight=”8″, scaleGridBottom=”6″);
   }

以上CSS的代码都比较简单明了，只是thumbDownSkin，thumbUpSkin，thumbOverSkin，trackSkin四个中的后面 4个属性（scaleGridLeft，scaleGridTop，scaleGridRight，scaleGridBottom）比较怪怪，一开始我也不懂是啥意思．Google了一下，原来是一个叫 Scale-9 的东东，这个东东中文叫啥我还不大清楚（好像是叫九格宫？）．简单的说，就是当图片拉伸的时候，只会对设置的格子之间的部分进行拉伸（横向拉伸时只对X坐标之间的部分位伸，纵向位伸时只对Y坐标之间的部分位伸），如上面的thumbUpSkin，横向拉伸时，会对X坐标为7，8之间的部分拉伸，纵向拉伸时，会对Y坐标为5，7之间的部分位伸，其它部分（只剩下四个角了）还是会等比例显示．这个鬼东西对像这样的滚动条，或者在拉伸那种圆角矩形时，非常有用．

评论

2 楼 lorry1113 2011-01-10  

这个问题我也遇到了，拉伸后的图片变形了，或者中间的那横纹拉开了，
后来修改默认的样式了，你有解决了吗，解决的话，麻烦告诉我啊!

1 楼 czjone 2011-01-07  

还是不太明白,如果 我的滚动条用的是一张图。那滚动条的变长和变短都会出现不平滑的情况～这样怎么处理？