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

By Minidxer | April 11, 2008

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

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         .tracklessScrollBar {
  9.             trackSkin: ClassReference(null);
  10.         }
  11.     </mx:Style>
  12.  
  13.     <mx:Script>
  14.         <![CDATA[
  15.             import mx.events.ItemClickEvent;
  16.  
  17.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
  18.                 list.setStyle("verticalScrollBarStyleName", evt.item.data);
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:Array id="arr">
  24.         <mx:Object label="One" />
  25.         <mx:Object label="Two" />
  26.         <mx:Object label="Three" />
  27.         <mx:Object label="Four" />
  28.         <mx:Object label="Five" />
  29.         <mx:Object label="Six" />
  30.         <mx:Object label="Seven" />
  31.         <mx:Object label="Eight" />
  32.         <mx:Object label="Nine" />
  33.         <mx:Object label="Ten" />
  34.     </mx:Array>
  35.  
  36.     <mx:Array id="dp">
  37.         <mx:Object label="default (undefined)"
  38.                 data="{undefined}" />
  39.         <mx:Object label="tracklessScrollBar"
  40.                 data="tracklessScrollBar" />
  41.     </mx:Array>
  42.  
  43.     <mx:ApplicationControlBar dock="true">
  44.         <mx:ToggleButtonBar id="toggleButtonBar"
  45.                 dataProvider="{dp}"
  46.                 itemClick="toggleButtonBar_itemClick(event);" />
  47.     </mx:ApplicationControlBar>
  48.  
  49.     <mx:List id="list"
  50.             dataProvider="{arr}"
  51.             rowCount="6"
  52.             width="100" />
  53.  
  54. </mx:Application>

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

  1. <mx:Style>
  2.     List {
  3.         verticalScrollBarStyleName: tracklessScrollBar;
  4.     }
  5.  
  6.     .tracklessScrollBar {
  7.         trackSkin: ClassReference(null);
  8.     }
  9. </mx:Style>

或者你可以直接在MXML代码中设置verticalScrollBarStyleName风格，代码可以为这样：

  1. <mx:List id="list"
  2.         dataProvider="{arr}"
  3.         rowCount="6"
  4.         width="100"
  5.         verticalScrollBarStyleName="tracklessScrollBar" />

代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | No Comments » | 93 views Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll