列表控件的使用（二）

四、瓦片式列表控件（TileList Control）的使用

      一）使用默认的条目渲染器TileListItemRenderer。它包括两个属性：label和icon。

<mx:TileList x="344" y="77" fontSize="12" height="262" width="330"
    maxColumns="3" 
    rowHeight="120" 
    columnWidth="100" 
    direction="horizontal">
    <mx:dataProvider>
        <mx:Array>
            <mx:Object label="鼠" icon="@Embed(source='images/sx/png-1501.png')"/>
            <mx:Object label="牛" icon="@Embed(source='images/sx/png-1502.png')"/>
            <mx:Object label="虎" icon="@Embed(source='images/sx/png-1503.png')"/>
            <mx:Object label="兔" icon="@Embed(source='images/sx/png-1504.png')"/>
            <mx:Object label="龙" icon="@Embed(source='images/sx/png-1505.png')"/>
        </mx:Array>
    </mx:dataProvider>
</mx:TileList>

二）使用自定义的条目渲染器

           1、渲染器组件文件源码

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:VBox width="130" height="100%">
        <mx:Image width="100%" height="130" source="{data.images}"/>
        <mx:Text width="100%" text="{data.name}" textAlign="center"/>
    </mx:VBox>
    <mx:VBox width="100%" height="100%">
        <mx:Label width="100%" text="性别：{data.sex}" textAlign="left"/>
        <mx:Label width="100%" text="年龄：{data.age}" textAlign="left"/>
        <mx:Label width="100%" text="手机号：{data.phone}" textAlign="left"/>
    </mx:VBox>    
</mx:HBox>

 2、应用页面源码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel x="10" y="10" width="638" height="472" layout="absolute" title="瓦片式列表2" fontSize="12">
        <mx:TileList x="10" y="10" fontSize="12" height="410" width="600"
            columnCount="2"
            rowHeight="200" 
            columnWidth="290" 
            direction="horizontal"
            itemRenderer="com.cjm.controls.Users">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object name="张三" sex="男" age="27" phone="13700000001" images="@Embed(source='images/users/png-1.png')"/>
                    <mx:Object name="李四" sex="男" age="28" phone="13700000002" images="@Embed(source='images/users/png-2.png')"/>
                    <mx:Object name="王五" sex="男" age="29" phone="13700000003" images="@Embed(source='images/users/png-3.png')"/>
                    <mx:Object name="陈六" sex="男" age="31" phone="13700000004" images="@Embed(source='images/users/png-4.png')"/>
                    <mx:Object name="刘七" sex="男" age="33" phone="13700000005" images="@Embed(source='images/users/png-5.png')"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:TileList>
    </mx:Panel>
</mx:Application>