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

Flex控件List

1.List控件簡(jiǎn)介

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

繼承關(guān)系如下：

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

子類：

FileSystemList,Menu,Tree

2.Flex控件List屬性與事件

名稱描述

editable數(shù)據(jù)是否可編輯，值為"false|true"  
editedItemPositionitemrenderer的位置，默認(rèn)值為"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ù)源中的一個(gè)屬性的值，可使用下面代碼指定
labelField="label"
labelField：指明顯示roleList對(duì)象中的哪個(gè)屬性，默認(rèn)值是"label"

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

功能說明：

鼠標(biāo)指向每一個(gè)數(shù)據(jù)項(xiàng)，顯示提示信息

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

5.屬性wordWrap--如果文字過長(zhǎng)，允許換行

功能說明：

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

代碼：
 

<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屬性，指定過長(zhǎng)的數(shù)據(jù)項(xiàng)自動(dòng)換行

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

功能說明：

自定義Flex控件的交互底色

代碼：

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

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

功能說明：

先與數(shù)據(jù)源ArrayCollection綁定，當(dāng)點(diǎn)擊Flex控件中的一個(gè)數(shù)據(jù)項(xiàng)時(shí)，顯示該數(shù)據(jù)項(xiàng)的所有屬性

代碼：

<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控件拖動(dòng)技術(shù)
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則