Flex控件List用法指南

本文和大家重点讨论一下Flex控件List的概念和用法，该Flex控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了平谷免费建站欢迎大家使用！

Flex控件List

1.List控件简介

该Flex控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。

继承关系如下：

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

子类：

FileSystemList,Menu,Tree

2.Flex控件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.属性DataProvider，LabelFunction--ArrayCollection数据源绑定并自定显示信息

功能说明：

绑定ArrayCollection类型数据源，并自定义Flex控件上的显示信息

代码：

 
 
 
  
  
   
  
  
  
  
  
  
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;  
  
  
  }  
  
  
  ]]> 
  
  
   
  
  
  
  
  
  
width="30%" 
  
  
  dataProvider="{roleList}" 
  
  
  labelFunction="lst_exam_getDispName" 
  
  
  />

注：

1.如果要显示的信息直接是数据源中的一个属性的值，可使用下面代码指定
labelField="label"
labelField：指明显示roleList对象中的哪个属性，默认值是"label"

4.属性dataTipFunction--显示文字提示

功能说明：

鼠标指向每一个数据项，显示提示信息

dataTipFunction和showDataTips为父类ListBase的属性，具体参考《FLEX控件_ListBase》

代码：

 
 
 
  
  
   
  
  
  
  
  
  
//数据源参考上例  
  
  
  privatefunctionmyDataTipFunction(value:Object):String{  
  
  
  return(value.label+"::"+value.data);  
  
  
  }  
  
  
  ]]> 
  
  
   
  
  
  
  
  
  
width="30%" 
  
  
  dataProvider="{roleList}" 
  
  
  labelField="label" 
  
  
  showDataTips="true" 
  
  
  dataTipFunction="myDataTipFunction"/>

注：

1.如果每一个数据项的提示信息恰好是另一个属性的值，则直接使用下面代码指定即可
dataTipField="data"//data表示roleList中的一个属性
2.mx:linkBar和mx:ButtonBar由于没有继承ListBase，因此不能使用这个方法，本人也没有找到具体方法实现本功能
3.用Flex控件List最大的问题在于，数据之间没有直线作间隔，不如LinkBar好看，这个问题待解决。#p#

5.属性wordWrap--如果文字过长，允许换行

功能说明：

如果显示的数据项的文字过长，Flex控件默认为多余的文字不显示，本功能指定控件将过长的数据项换行显示

代码：

 
 
 
  
  
   
  
  
  
  
  
  
//数据源参考上例  
  
  
  ]]> 
  
  
   
  
  
  
  
  
  
dataProvider="{roleList}" 
  
  
  labelField="label" 
  
  
  width="220" 
  
  
  height="200" 
  
  
  variableRowHeight="true" 
  
  
  wordWrap="true"/>

注：

1.利用wordWrap和variableRowHeight属性，指定过长的数据项自动换行

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

功能说明：

自定义Flex控件的交互底色

代码：

#p#

7.事件itemClick--显示选中数据项的所有属性

功能说明：

先与数据源ArrayCollection绑定，当点击Flex控件中的一个数据项时，显示该数据项的所有属性

代码：

 
 
 
  
  
   
  
  
  
  
  
  
//数据源参考上例  
  
  
  protectedfunctionlst_exam_itemClickHandler(event:ListEvent):void  
  
  
  {  
  
  
  vart:List=event.currentTargetasList;  
  
  
  Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);  
  
  
  }  
  
  
  ]]> 
  
  
   
  
  
  
  
  
  
width="30%" 
  
  
  dataProvider="{roleList}" 
  
  
  labelField="label" 
  
  
  itemClick="lst_exam_itemClickHandler(event)"/>

【编辑推荐】

Flex控件工具大全
详解Flex控件拖动技术
技术前沿看Flex客户端缓存技术如何使用
解析Flex全屏模式设置方法
Flex内存泄露解决方法和内存释放优化原则

文章题目：Flex控件List用法指南
URL链接：http://www.shufengxianlan.com/qtweb/news33/85683.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容