主要操作包括：显示提示，使用图标，编辑列表条目中数据。
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>
效果如图：
