在學習Flex的過程中，你可能會遇到Flex中設置Flex滾動條的樣式方面的問題，這里和大家分享一下，在Flex中，簡單的修改控件的外觀可以使用樣式(Style)和皮膚(skin)，這里修改滾動的外觀也是如此．

Flex中設置Flex滾動條的樣式

在Flex中使用容器的時候，經常會遇到出現Flex滾動條的情況，雖然官方提示的Flex滾動條外觀已經非常漂亮，但有個時候我們還是會有種修改Flex滾動條外觀的沖動，讓我們的程序看起來更和諧些。

在Flex中，簡單的修改控件的外觀可以使用樣式(Style)和皮膚(skin)，這里修改滾動的外觀也是如此．首先先來比較下修改前后的Flex滾動條樣式（以橫向Flex滾動條為例）．

　雖然我更改后的樣式沒有自帶的漂亮,但是相信你一定可以把它弄的比較漂亮.以上自定義是通過以下代碼實現的（代碼寫在外部的CSS文件中，如main.css中）．

1.  
2.HScrollBar{  
3.downArrowUpSkin:  
4.Embed(source=”/assets/downArrow.png”);  
5.downArrowOverSkin:  
6.Embed(source=”/assets/downArrow.png”);  
7.downArrowDownSkin:  
8.Embed(source=”/assets/downArrow.png”);  
9.upArrowUpSkin:  
10.Embed(source=”/assets/upArrow.png”);  
11.upArrowOverSkin:  
12.Embed(source=”/assets/upArrow.png”);  
13.upArrowDownSkin:  
14.Embed(source=”/assets/upArrow.png”);  
15.thumbDownSkin:  
16.Embed(source=”/assets/thumb.png”,  
17.scaleGridLeft=”7″,scaleGridTop=”5″,  
18.scaleGridRight=”8″,scaleGridBottom=”7″);  
19.thumbUpSkin:  
20.Embed(source=”/assets/thumb.png”,  
21.scaleGridLeft=”7″,scaleGridTop=”5″,  
22.scaleGridRight=”8″,scaleGridBottom=”7″);  
23.thumbOverSkin:  
24.Embed(source=”/assets/thumb.png”,  
25.scaleGridLeft=”7″,scaleGridTop=”5″,  
26.scaleGridRight=”8″,scaleGridBottom=”7″);  
27.trackSkin:  
28.Embed(source=”/assets/scrolltrack.png”,  
29.scaleGridLeft=”7″,scaleGridTop=”4″,  
30.scaleGridRight=”8″,scaleGridBottom=”6″);  
31.}  
 

 以上CSS的代碼都比較簡單明了，只是thumbDownSkin，thumbUpSkin，thumbOverSkin，trackSkin四個中的后面4個屬性（scaleGridLeft，scaleGridTop，scaleGridRight，scaleGridBottom）比較怪怪，一開始我也不懂是啥意思．Google了一下，原來是一個叫Scale-9的東西．簡單的說，就是當圖片拉伸的時候，只會對設置的格子之間的部分進行拉伸（橫向拉伸時只對X坐標之間的部分位伸，縱向位伸時只對Y坐標之間的部分位伸），如上面的thumbUpSkin，橫向拉伸時，會對X坐標為7，8之間的部分拉伸，縱向拉伸時，會對Y坐標為5，7之間的部分位伸，其它部分（只剩下四個角了）還是會等比例顯示．這個鬼東西對像這樣的Flex滾動條，或者在拉伸那種圓角矩形時，非常有用．

【編輯推薦】

1. Flex滾動條常見問題解答
2. FlexBuilder4十大新特性閃亮登場
3. 解析AS3中Flex正則表達式的使用
4. 揭開Flex正則表達式的神秘面紗
5. FlexBuilder開發方法及特點解析