本文和大家重點討論一下Flex控件List的概念和用法，該Flex控件主要用于“豎向顯示單列表數(shù)據(jù)項”。如果數(shù)據(jù)項過多，可以出現(xiàn)一個垂直滾動條。

Flex控件List

1.List控件簡介

該Flex控件主要用于“豎向顯示單列表數(shù)據(jù)項”。如果數(shù)據(jù)項過多，可以出現(xiàn)一個垂直滾動條。

繼承關系如下：

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

子類：

FileSystemList,Menu,Tree

2.Flex控件List屬性與事件

名稱描述

editable數(shù)據(jù)是否可編輯，值為"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.屬性DataProvider，LabelFunction--ArrayCollection數(shù)據(jù)源綁定并自定顯示信息

功能說明：

綁定ArrayCollection類型數(shù)據(jù)源，并自定義Flex控件上的顯示信息

代碼：

<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.如果要顯示的信息直接是數(shù)據(jù)源中的一個屬性的值，可使用下面代碼指定
labelField="label"
labelField：指明顯示roleList對象中的哪個屬性，默認值是"label"

4.屬性dataTipFunction--顯示文字提示

功能說明：

鼠標指向每一個數(shù)據(jù)項，顯示提示信息

dataTipFunction和showDataTips為父類ListBase的屬性，具體參考《FLEX控件_ListBase》

代碼：
 

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
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.如果每一個數(shù)據(jù)項的提示信息恰好是另一個屬性的值，則直接使用下面代碼指定即可
dataTipField="data"//data表示roleList中的一個屬性
2.mx:linkBar和mx:ButtonBar由于沒有繼承ListBase，因此不能使用這個方法，本人也沒有找到具體方法實現(xiàn)本功能
3.用Flex控件List最大的問題在于，數(shù)據(jù)之間沒有直線作間隔，不如LinkBar好看，這個問題待解決。#p#

5.屬性wordWrap--如果文字過長，允許換行

功能說明：

如果顯示的數(shù)據(jù)項的文字過長，F(xiàn)lex控件默認為多余的文字不顯示，本功能指定控件將過長的數(shù)據(jù)項換行顯示

代碼：
 

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
dataProvider="{roleList}" 
labelField="label" 
width="220" 
height="200" 
variableRowHeight="true" 
wordWrap="true"/> 

注：

1.利用wordWrap和variableRowHeight屬性，指定過長的數(shù)據(jù)項自動換行

6.屬性alternatingItemColors--指定Flex控件的交互底色

功能說明：

自定義Flex控件的交互底色

代碼：

<mx:ListalternatingItemColors="[#66FFFF,#33CCCC]".../>#p#

7.事件itemClick--顯示選中數(shù)據(jù)項的所有屬性

功能說明：

先與數(shù)據(jù)源ArrayCollection綁定，當點擊Flex控件中的一個數(shù)據(jù)項時，顯示該數(shù)據(jù)項的所有屬性

代碼：

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
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. Flex控件工具大全
2. 詳解Flex控件拖動技術(shù)
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 解析Flex全屏模式設置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則