自定义FLEX滚动条滑块样式

最新推荐文章于 2018-04-11 09:27:37 发布

原创最新推荐文章于 2018-04-11 09:27:37 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flex #function #application #encoding #layout

本文介绍如何在Flex中自定义滚动条样式，并通过调整滑块高度保持美观。具体包括使用setScrollProperties方法解决自定义滑块因固定大小而产生的变形问题。

在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)

package    
  
{     
  
     import flash.events.Event;     
  
          
  
     import mx.controls.TextArea;     
  
     import mx.events.FlexEvent;     
  
      
  
     public class MyTextArea  extends TextArea     
  
     {     
  
         public function MyTextArea()     
  
         {     
  
             super ();     
  
         }     
  
         //每次刷新滚动条时调用一次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 );     
  
         }     
  
     }     
  
}

主MXML

<?xml version= "1.0" encoding= "utf-8" ?>     
  
<mx:Application xmlns:mx= "http://www.adobe.com/2006/mxml " layout= "absolute" applicationComplete= "init()" xmlns:local= "*" width= "500" height= "400" fontSize= "12" >     
  
     <mx:Style>     
  
         .myTextArea     
  
         {     
  
             downArrowSkin: Embed(source= "down.png" );     
  
             upArrowSkin: Embed(source= "up.png" );     
  
             trackSkin: Embed(source= "track.png" ,scaleGridTop= "20" ,scaleGridLeft= "7" ,scaleGridRight= "9" ,scaleGridBottom= "80" );     
  
             thumbSkin: Embed(source= "thumb.png" );     
  
         }     
  
     </mx:Style>     
  
     <mx:Script>     
  
         <![CDATA[     
  
             [Bindable]     
  
             private var content: String = "" ;     
  
             private function init(): void    
  
             {     
  
                 for ( var i: uint = 0 ;i< 50 ;i++)content+= "/n L4cd.Net 简单工作 /n" ;     
  
             }     
  
         ]]>     
  
     </mx:Script>     
  
     <local:MyTextArea text= "{content}" verticalScrollBarStyleName= "myTextArea" verticalScrollPolicy= "on" borderStyle= "none" borderThickness= "1" width= "235" x= "10" height= "352" y= "38" />     
  
     <mx:TextArea text= "{content}" verticalScrollBarStyleName= "myTextArea" verticalScrollPolicy= "on" borderStyle= "none" borderThickness= "1" height= "352" y= "38" width= "235" x= "255" />     
  
     <mx:Label x= "10" y= "10" text= "自定义TextArea" />     
  
     <mx:Label x= "255" y= "10" text= "默认TextArea" />     
  
</mx:Application>    
  
 链接地址：http://l4cd.net/blog/post-old-141.html