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>

   效果：

其中 labelfield指所要显示的字符内容

为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！！！