學習筆記 Flex中設置Flex滾動條的樣式
在學習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滾動條，或者在拉伸那種圓角矩形時，非常有用．
【編輯推薦】
