列表控件的使用（二）

raymond.chen

浏览: 1437368 次
性别:
来自: 广州

最近访客更多访客>>

林祥纤

whzresponse

loginboot

vicento4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex3

Adobe XML

四、瓦片式列表控件（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>