你对Flex控件中的List控件的用法是否熟悉，这里向大家简单描述一下List的属性和事件，该控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。
Flex中List控件用法
1.List控件简介
该控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。
继承关系如下：
ListListBaseScrollControlBaseUIComponentFlexSpriteSprite
◆子类：
FileSystemList,Menu,Tree
2.List控件属性与事件
名称描述
editable数据是否可编辑，值为"false|true"
editedItemPositionitemrenderer的位置，默认值为"Nodefault"
editorDataField"text"
editorHeightOffset="0"
editorUsesEnterKey="false|true"
editorWidthOffset="0"
editorXOffset="0"
editorYOffset="0"
imeMode="null"
itemEditor="TextInput"
itemEditorInstance="Currentitemeditor"
rendererIsEditor="false|true" #p#
3.List控件属性DataProvider，LabelFunction--ArrayCollection数据源绑定并自定显示信息
功能说明：
绑定ArrayCollection类型数据源，并自定义控件上的显示信息
代码：
注：
1.如果要显示的信息直接是数据源中的一个属性的值，可使用下面代码指定
labelField="label"
labelField：指明显示roleList对象中的哪个属性，默认值是"label"
4.List控件的属性dataTipFunction--显示文字提示
功能说明：
鼠标指向每一个数据项，显示提示信息
dataTipFunction和showDataTips为父类ListBase的属性，具体参考《FLEX控件_ListBase》
代码：
复制
<fx:Script> <![CDATA[ //数据源参考上例 privatefunctionmyDataTipFunction(value:Object):String{ return(value.label+"::"+value.data); } ]]> </fx:Script> <mx:Listidmx:Listid="lst_exam" width="30%" dataProvider="{roleList}" labelField="label" showDataTips="true" dataTipFunction="myDataTipFunction"/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
注：
1.如果每一个数据项的提示信息恰好是另一个属性的值，则直接使用下面代码指定即可
dataTipField="data"//data表示roleList中的一个属性
2.mx:linkBar和mx:ButtonBar由于没有继承ListBase，因此不能使用这个方法，本人也没有找到具体方法实现本功能
3.用List控件最大的问题在于，数据之间没有直线作间隔，不如LinkBar好看，这个问题待解决。#p#
5.List控件属性wordWrap--如果文字过长，允许换行
功能说明：
如果显示的数据项的文字过长，控件默认为多余的文字不显示，本功能指定控件将过长的数据项换行显示
代码：
复制
<fx:Script> <![CDATA[ //数据源参考上例 ]]> </fx:Script> <mx:Listidmx:Listid="lst_exam" dataProvider="{roleList}" labelField="label" width="220" height="200" variableRowHeight="true" wordWrap="true"/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
注：
1.利用wordWrap和variableRowHeight属性，指定过长的数据项自动换行
6.List控件属性alternatingItemColors--指定控件的交互底色
功能说明：
自定义控件的交互底色
代码：
7.List控件的事件itemClick--显示选中数据项的所有属性
功能说明：
先与数据源ArrayCollection绑定，当点击控件中的一个数据项时，显示该数据项的所有属性
代码：
复制
<fx:Script> <![CDATA[ //数据源参考上例 protectedfunctionlst_exam_itemClickHandler(event:ListEvent):void { vart:List=event.currentTargetasList; Alert.show(t.selectedItem.label+"::"+t.selectedItem.data); } ]]> </fx:Script> <mx:Listidmx:Listid="lst_exam" width="30%" dataProvider="{roleList}" labelField="label" itemClick="lst_exam_itemClickHandler(event)"/>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
【编辑推荐】
复制
<mx:ListalternatingItemColorsmx:ListalternatingItemColors="[#66FFFF,#33CCCC]".../>
1.
复制
<fx:Script> <![CDATA[ importmx.collections.ArrayCollection; [Bindable] publicvarroleList:ArrayCollection =newArrayCollection([ {label:"good",data:"isgood"}, {label:"bad",data:"isbad"} ]); privatefunctionlst_exam_getDispName(item:Object):String{ varresult:String=""; if(item.hasOwnProperty("label")){ result+=item.label+","; } if(item.hasOwnProperty("data")){ result+=item.data; } returnresult; } ]]> </fx:Script> <mx:Listidmx:Listid="lst_exam" width="30%" dataProvider="{roleList}" labelFunction="lst_exam_getDispName" />
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.