在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)
01.
package
02.
{
03.
import
flash.events.Event;
04.
05.
import
mx.controls.TextArea;
06.
import
mx.events.FlexEvent;
07.
08.
public
class
MyTextArea
extends
TextArea
09.
{
10.
public
function
MyTextArea()
11.
{
12.
super
();
13.
}
14.
//每次刷新滚动条时调用一次setScrollProperties,设置pageSize为0
15.
override
protected
function
setScrollBarProperties(totalColumns:
int
, visibleColumns:
int
, totalRows:
int
, visibleRows:
int
):
void
16.
{
17.
super
.setScrollBarProperties(totalColumns,visibleColumns,totalRows,visibleRows);
18.
if
(verticalScrollBar)verticalScrollBar.setScrollProperties(
0
,verticalScrollBar.minScrollPosition,verticalScrollBar.maxScrollPosition,
0
);
19.
}
20.
}
21.
}
主MXML
01.
<?xml
version=
"1.0"
encoding=
"utf-8"
?>
02.
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml
"
layout=
"absolute"
applicationComplete=
"init()"
xmlns:local=
"*"
width=
"500"
height=
"400"
fontSize=
"12"
>
03.
<mx:Style>
04.
.myTextArea
05.
{
06.
downArrowSkin: Embed(source=
"down.png"
);
07.
upArrowSkin: Embed(source=
"up.png"
);
08.
trackSkin: Embed(source=
"track.png"
,scaleGridTop=
"20"
,scaleGridLeft=
"7"
,scaleGridRight=
"9"
,scaleGridBottom=
"80"
);
09.
thumbSkin: Embed(source=
"thumb.png"
);
10.
}
11.
</mx:Style>
12.
<mx:Script>
13.
<![CDATA[
14.
[Bindable]
15.
private
var
content:
String
=
""
;
16.
private
function
init():
void
17.
{
18.
for
(
var
i:
uint
=
0
;i<
50
;i++)content+=
"/n L4cd.Net 简单工作 /n"
;
19.
}
20.
]]>
21.
</mx:Script>
22.
<local:MyTextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
width=
"235"
x=
"10"
height=
"352"
y=
"38"
/>
23.
<mx:TextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
height=
"352"
y=
"38"
width=
"235"
x=
"255"
/>
24.
<mx:Label x=
"10"
y=
"10"
text=
"自定义TextArea"
/>
25.
<mx:Label x=
"255"
y=
"10"
text=
"默认TextArea"
/>
26.
</mx:Application>
链接地址:http://l4cd.net/blog/post-old-141.html