自定义FLEX滚动条滑块样式

最新推荐文章于 2024-05-11 17:30:31 发布

公多拉

最新推荐文章于 2024-05-11 17:30:31 发布

阅读量4.3k

点赞数

文章标签： flex function application encoding import layout

本文链接：https://blog.csdn.net/gongyongxing/article/details/5802571

版权

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

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

我们以TextArea的滚动条为例,对比看看效果

https://dl-web.dropbox.com/u/1184383/blog/post/post-old-141/other.swf

代码如下:
自定义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>

公多拉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
自定义FLEX滚动条滑块样式

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

扫一扫