flex用样式文件自定义滚动条样式

css样式文件

/* ScrollBar 全局*/
.scrollBar{
	trackSkin:Embed(source='images/track_skin.png', scaleGridLeft=8, scaleGridRight=9, scaleGridTop=11,scaleGridBottom=12);
	thumbUpSkin:Embed(source="images/thum_skin.png");
	thumbOverSkin:Embed(source='images/thum_skin.png', scaleGridLeft=8, scaleGridRight=9, scaleGridTop=11,scaleGridBottom=12);
	thumbDownSkin:Embed(source='images/thum_skin.png', scaleGridLeft=8, scaleGridRight=9, scaleGridTop=11,scaleGridBottom=12);
	downArrowSkin: Embed(source="images/down.png");
	upArrowSkin: Embed(source="images/up.png");
}

Mxml主文件

如果想使滚动条的thumbSkin设置成一个”点”或一个”块”，这个块是固定大小的..不像Flex自带的滚动条会随滚动区域的高度而改变，如果直接设置thumbSkin,那滑块将拉变形~非常难看。
这时候我们可以使用verticalScrollBar里的setScrollProperties方法来调整滑块高度。
例如重写

//每次刷新滚动条时调用一次setScrollProperties,设置pageSize为0
override protected function setScrollBarProperties(totalColumns:int, visibleColumns:int, totalRows:int, visibleRows:int):void
{
    super.setScrollBarProperties(totalColumns,visibleColumns,totalRows,visibleRows);
    if(verticalScrollBar)verticalScrollBar.setScrollProperties(0,verticalScrollBar.minScrollPosition,verticalScrollBar.maxScrollPosition,0);
}

Tags: FLEX, 滚动条, 自定义样式

This entry was posted on Monday, July 5th, 2010 at am 10:26 by 施 常亮 and is filed under FLEX. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.