现在的位置: 首页 > 综合 > 正文

自定义FLEX滚动条滑块样式

2012年02月21日 ⁄ 综合 ⁄ 共 2533字 ⁄ 字号 评论关闭

在Flex里我们可以使用downArrowSkin,upArrowSkin,trackSkin,thumbSkin方法的设置滚动条的样式..
不过由于设计的关系..
滚动条的thumbSkin常设置成一个"点"或一个"块"..
这个块是固定大小的..不像Flex自带的滚动条会随滚动区域的高度而改变..
如果直接设置thumbSkin,那滑块将拉变形~非常难看..
这时候我们可以使用verticalScrollBar里的setScrollProperties方法来调整滑块高度..


    1.public function setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void



代码如下:
自定义MyTextArea(为了调用protected的verticalScrollBar)

01.
package


02.
{



03.
    
import
flash.events.Event;


04.
     
 

05.
    
import
mx.controls.TextArea;


06.
    
import
mx.events.FlexEvent;


07.
 
 

08.
    
public
class

MyTextArea
extends
TextArea


09.
    
{


10.
        
public
function

MyTextArea()


11.
        
{


12.
            
super
();



13.
        
}


14.
        
//每次刷新滚动条时调用一次setScrollProperties,设置pageSize为0



15.
        
override
protected
function
setScrollBarProperties(totalColumns:
int
, visibleColumns:
int
, totalRows:
int
, visibleRows:
int
):
void
 


16.
        
{


17.
            
super
.setScrollBarProperties(totalColumns,visibleColumns,totalRows,visibleRows);



18.
            
if
(verticalScrollBar)verticalScrollBar.setScrollProperties(
0
,verticalScrollBar.minScrollPosition,verticalScrollBar.maxScrollPosition,
0
);


19.
        
}


20.
    
}


21.
}



主MXML

01.
<?xml
version=

"1.0"
encoding=
"utf-8"
?>


02.
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml
"

layout=
"absolute"
applicationComplete=
"init()"
xmlns:local=
"*"
width=
"500"
height=
"400"
fontSize=
"12"
>



03.
    
<mx:Style>


04.
        
.myTextArea


05.
        
{


06.
            
downArrowSkin: Embed(source=
"down.png"
);


07.
            
upArrowSkin: Embed(source=
"up.png"
);


08.
            
trackSkin: Embed(source=
"track.png"
,scaleGridTop=
"20"
,scaleGridLeft=
"7"
,scaleGridRight=
"9"
,scaleGridBottom=
"80"
);


09.
            
thumbSkin: Embed(source=
"thumb.png"
);


10.
        
}


11.
    
</mx:Style>


12.
    
<mx:Script>


13.
        
<![CDATA[


14.
            
[Bindable]


15.
            
private
var

content:
String
=
""
;



16.
            
private
function
init():
void


17.
            
{


18.
                
for
(
var
i:
uint
=
0
;i<
50
;i++)content+=
"/n L4cd.Net 简单工作 /n"
;



19.
            
}


20.
        
]]>


21.
    
</mx:Script>


22.
    
<local:MyTextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
width=
"235"
x=
"10"
height=
"352"
y=
"38"
/>



23.
    
<mx:TextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
height=
"352"
y=
"38"
width=
"235"
x=
"255"
/>



24.
    
<mx:Label x=
"10"
y=
"10"
text=
"自定义TextArea"
/>



25.
    
<mx:Label x=
"255"
y=
"10"
text=
"默认TextArea"
/>



26.
</mx:Application>


链接地址:http://l4cd.net/blog/post-old-141.html

抱歉!评论已关闭.