主要操作包括：显示提示，使用图标，编辑列表条目中数据。

1.使用数据提示：

当鼠标停留在条目上时，可以显示该条目的相关数据提示。

当利用滚动条时，可以显示滚动条的相关提示。

在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示。

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                        xmlns:s="library://ns.adobe.com/flex/spark" 
 4                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
 5     <fx:Script>
 6         <![CDATA[
 7             
 8             
 9             //定义数据条目显示的内容，在列表控件中，该方法只有一个参数，为当前的数据条目
10             
11         private function myDataTipFunction(item:Object):String
12         {
13            return "您查看的内容为:"+item.label+item.data;
14         }
15             
16         /*    
17             定义滚动条显示的提示内容，该方法包括2个参数
18             direction为滚动条的方向
19             position为滚动条离控件顶端的距离
20         */    
21             private function scrollTipFunction(direction:String,position:Number):String
22             {
23               if(direction == "vertical")
24                   return "查看剩余条目"
25               else
26                   return "";
27             
28             }
29             
30         ]]>
31     </fx:Script>
32     
33     <fx:Declarations>
34         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
35     
36     
37     <fx:Model id="myPhone">
38         <!--定义列表控件所需的数据-->
39         <states>
40             <state label="诺基亚" data="nokia"/>
41             <state label="摩托罗拉" data="moto"/>
42             <state label="索爱" data="se"/>
43             <state label="三星" data="sum"/>
44             <state label="Palm" data="pal"/>
45             <state label="黑莓" data="bb"/>
46             <state label="联想" data="le"/>
47             <state label="其他" data="etc"/>
48         </states>
49     </fx:Model>
50 </fx:Declarations>
51     
52     <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
53         <mx:Label text="选择手机品牌"/>
54         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
55         <mx:List id="source" color="blue" width="100%" height="100%"
56                        dataProvider="{myPhone.state}"
57                         rollOverColor="#80FF00" showDataTips="true"
58                         showScrollTips="true" dataTipFunction="myDataTipFunction" scrollTipFunction="scrollTipFunction"/>
59         
60     </mx:Panel>
61 </s:WindowedApplication>

效果如图：

  

2.在列表控件中使用图标

在列表控件中可以使用iconField和iconFunction属性定义图标相关的属性以及方法。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                        xmlns:s="library://ns.adobe.com/flex/spark" 
 4                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
 5     <fx:Script>
 6         <![CDATA[
 7             //定义条目中所使用的图标
 8             [Embed(source="assets/mm-icon.png") ]
 9             public var iconSymbol:Class;
10             
11             
12             
13         ]]>
14     </fx:Script>
15     
16     <fx:Declarations>
17         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
18     
19     
20     <fx:Model id="myPhone">
21         <!--定义列表控件所需的数据-->
22         <states>
23             <state label="诺基亚" data="nokia" myIcon="iconSymbol"/>
24             <state label="摩托罗拉" data="moto" myIcon="iconSymbol"/>
25             <state label="索爱" data="se" myIcon="iconSymbol"/>
26             <state label="三星" data="sum" myIcon="iconSymbol"/>
27             <state label="Palm" data="pal" myIcon="iconSymbol"/>
28             <state label="黑莓" data="bb" myIcon="iconSymbol"/>
29             <state label="联想" data="le" myIcon="iconSymbol"/>
30             <state label="其他" data="etc" myIcon="iconSymbol"/>
31         </states>
32     </fx:Model>
33 </fx:Declarations>
34     
35     <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
36         <mx:Label text="选择手机品牌"/>
37         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
38         <mx:List id="source" color="blue" width="100%" height="100%"
39                        dataProvider="{myPhone.state}"
40                         rollOverColor="#80FF00" iconField="myIcon"/>
41         
42     </mx:Panel>
43 </s:WindowedApplication>

iconField="myIcon"：指明条目的图标由数据中的myIcon属性提供。

 

3.编辑列表条目中数据

编辑列表中的数据时，需要将editable属性设置为true。

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                        xmlns:s="library://ns.adobe.com/flex/spark" 
 4                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
 5     <fx:Script>
 6         <![CDATA[
 7             //定义条目中所使用的图标
 8 
 9             import mx.events.ListEvent;
10             //鼠标单击时触发的事件条目处于可编辑状态
11             private function itemEditBegin(event:ListEvent):void
12             {
13               state.text="当前状态为：可以编辑数据";
14             }
15             //当编辑完条目，鼠标单击其他区域时触发的事件，条目处于编辑状态完成
16             private function itemEditEnd(event:ListEvent):void
17             {
18               state.text="当前状态为:完成编辑数据";
19             }
20             
21             //当单击条目时，显示条目显示的标签，在编辑后单击标签，显示更新后的标签值
22             private function showType(event:ListEvent):void
23             {
24               typee.text = event.target.selectedItem.label;
25             }
26             
27             
28             
29         ]]>
30     </fx:Script>
31     
32     <fx:Declarations>
33         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
34     
35     
36     <fx:Model id="myPhone">
37         <!--定义列表控件所需的数据-->
38         <states>
39             <state label="诺基亚" data="nokia" />
40             <state label="摩托罗拉" data="moto" />
41             <state label="索爱" data="se" />
42             <state label="三星" data="sum" />
43             <state label="Palm" data="pal" />
44             <state label="黑莓" data="bb" />
45             <state label="联想" data="le" />
46             <state label="其他" data="etc" />
47         </states>
48     </fx:Model>
49 </fx:Declarations>
50     
51     <mx:Panel title="xianshitubiao" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340" height="316">
52         <mx:Label text="选择手机品牌"/>
53         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
54         <mx:List id="source" color="blue" width="100%" height="100%"
55                        dataProvider="{myPhone.state}"
56                         rollOverColor="#80FF00" editable="true" itemEditBeginning="itemEditBegin(event)"
57                         itemEditEnd="itemEditEnd(event)" itemClick="showType(event)"
58                         />
59         <mx:Label id="state"/>
60         <mx:Label id="typee"/>
61         
62     </mx:Panel>
63 </s:WindowedApplication>

效果如图：