Flex中如何通过设置trackSkin为null将List控件中的滚动条轨道皮肤(track skin)去除的例子

接下来的例子演示了如何通过设置trackSkin为null，将List控件中的滚动条轨道皮肤(track skin)去除/恢复默认状态。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）：

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Style>
.tracklessScrollBar {
trackSkin: ClassReference(null);
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;

private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
list.setStyle("verticalScrollBarStyleName", evt.item.data);
}
]]>
</mx:Script>

<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>

<mx:Array id="dp">
<mx:Object label="default (undefined)"
data="{undefined}" />
<mx:Object label="tracklessScrollBar"
data="tracklessScrollBar" />
</mx:Array>

<mx:ApplicationControlBar dock="true">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{dp}"
itemClick="toggleButtonBar_itemClick(event);" />
</mx:ApplicationControlBar>

<mx:List id="list"
dataProvider="{arr}"
rowCount="6"
width="100" />

</mx:Application>

你也可以通过类似于下面的代码，在一个扩展CSS文件中或者<mx:Style />块中设置
verticalScrollBarStyleName
风格:

<mx:Style>
List {
verticalScrollBarStyleName: tracklessScrollBar;
}

.tracklessScrollBar {
trackSkin: ClassReference(null);
}
</mx:Style>

或者你可以直接在MXML代码中设置[code]verticalScrollBarStyleName

风格，代码可以为这样：

<mx:List id="list"
dataProvider="{arr}"
rowCount="6"
width="100"
verticalScrollBarStyleName="tracklessScrollBar" />
[/code]