Flex中怎么設置Flex滾動條樣式

這期內容當中小編將會給大家帶來有關Flex中怎么設置Flex滾動條樣式，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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滾動條，或者在拉伸那種圓角矩形時，非常有用．

上述就是小編為大家分享的Flex中怎么設置Flex滾動條樣式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。