flex 学习笔记 List（项呈示器）

List 控件可显示垂直项目列表。

示例：

????? 代码

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  

<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

???????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

???????????????xmlns:mx="library://ns.adobe.com/flex/mx"?minWidth="955"?minHeight="600">?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????</fx:Declarations>?

  
  

????<fx:Script>?

  
  

????????<![CDATA[ ?
  
  
????????????import?mx.collections.ArrayCollection; ?
  
  
????????????[Bindable] ?
  
  
????????????public?var?listInfo:ArrayCollection?=?new?ArrayCollection([{name:"炎炎夏日",icon:"assets/1.jpg"},?
  
  
????????????????{name:"飒飒秋风",icon:"assets/2.jpg"},?
  
  
????????????????{name:"银装素裹",icon:"assets/3.jpg"},{name:"燕啄新泥",icon:"assets/4.jpg"}]); ?
  
  
????????]]>?
  
  

????</fx:Script>?

  
  

????<s:List?dataProvider="{listInfo}"?labelField="name"/>?

  
  

</s:Application>?

 
 

?? 效果：

为list加上itemrenderer：

???? list:????? <s:List dataProvider="{listInfo}" itemRenderer="listItemrenderer" >

项呈示器：

?

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  

<s:ItemRenderer?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

????????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

????????????????xmlns:mx="library://ns.adobe.com/flex/mx"? ?

  
  

????????????????autoDrawBackground="true">?

  
  

????<s:Group>?

  
  

????????????<s:Label?text="{data.name}"?x="10"/>?

  
  

????????????<s:BitmapImage??source="{data.icon}"?width="10"?height="10"/>?

  
  

????</s:Group>?

  
  
?
  
  
???? ?
  
  

</s:ItemRenderer>?

 
 

一个group里面 放了一个图片和一个label 其中label的横坐标是10 ，这个效果类似于qq的好友列表? 即 icon+label。

学习ING！！！