Question

Flex中如何使用自定义滚动条样式

Answer 1

thumb-up-skin:ClassReference('skins.ScrollThumbSkin'); thumb-down-skin:ClassReference('skins.ScrollThumbSkin'); thumb-over-skin:ClassReference('skins.ScrollThumbSkin'); up-arrow-up-skin:ClassReference('skins.ScrollArrowSkin'); up-arrow-over-skin:ClassReference('skins.ScrollArrowSkin'); up-arrow-down-skin:ClassReference('skins.ScrollArrowSkin'); up-arrow-disabled-skin:ClassReference('skins.ScrollArrowSkin'); down-arrow-up-skin:ClassReference('skins.ScrollArrowSkin'); down-arrow-over-skin:ClassReference('skins.ScrollArrowSkin'); down-arrow-down-skin:ClassReference('skins.ScrollArrowSkin'); down-arrow-disabled-skin:ClassReference('skins.ScrollArrowSkin');}</mx:Style> 在skins文件夹中将上面用到的ScrollTrackSkin、ScrollThumbSkin、ScrollArrowSkin写好。 ScrollTrackSkin.aspackage skins{import mx.skins.ProgrammaticSkin; publicclass ScrollTrackSkin extends ProgrammaticSkin{publicfunction ScrollTrackSkin(){super();}override protectedfunction updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{super.updateDisplayList(14, unscaledHeight); graphics.clear(); graphics.beginFill(0x1A5E11); graphics.drawRoundRectComplex(-14, 0, 14, unscaledHeight, 20, 20, 20, 20); graphics.endFill();}}} ScrollThumbSkin.aspackage skins{import mx.skins.ProgrammaticSkin; publicclass ScrollThumbSkin extends ProgrammaticSkin{publicfunction ScrollThumbSkin(){super();}override protectedfunction updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(14, unscaledHeight); switch(name){default:case"thumbUpSkin": graphics.clear(); graphics.beginFill(0x33991A); graphics.drawRoundRectComplex(-14, 0, 14, unscaledHeight, 20, 20, 20, 20); graphics.endFill();break;case"thumbOverSkin": case"thumbDownSkin": graphics.clear(); graphics.beginFill(0x42C521); graphics.endFill();break;}}}} ScrollArrowSkin.as(此样式中没有箭头，因此这是个空类)package skins{import mx.skins.ProgrammaticSkin; publicclass ScrollArrowSkin extends ProgrammaticSkin{publicfunction ScrollArrowSkin(){super();}}} 到此，自定义样式就完成了，运行Flex工程，就可以看到效果了。 这种方法有个小小的问题，就是改变了滚动条样式的组件有可能检测不到自定义滚动条的宽度，需要设置一下paddingRight属性，将滚动条的位置预留出来。 希望有更好的自定义滚动条方法的大虾们提出宝贵的意见。