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>

            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:     

项呈示器：

 

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