Flex3.0入门课程：创建简单相册

您当前位置：首页 > 文章中心 > HTML5+CSS3 > Flash+Flex

【Flash+Flex】

下载

新闻

文章

Flex3.0入门课程：创建简单相册

pictrue.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
	<mx:Array id="arr">
		<mx:Object label="图片标题1" thumbnailImage="../libs/min1.jpg" fullImage="../libs/big1.jpg" />
		<mx:Object label="图片标题2" thumbnailImage="../libs/min2.jpg" fullImage="../libs/big2.jpg" />
		<mx:Object label="图片标题3" thumbnailImage="../libs/min3.jpg" fullImage="../libs/big3.jpg" />
		<mx:Object label="图片标题4" thumbnailImage="../libs/min4.jpg" fullImage="../libs/big4.jpg" />
		<mx:Object label="图片标题5" thumbnailImage="../libs/min5.jpg" fullImage="../libs/big5.jpg" />
	</mx:Array>
	<mx:Panel title="实现简单相册" width="425" height="465" horizontalAlign="center">
		<mx:Image id="img" source="{horizontalList.selectedItem.fullImage}" height="300" maintainAspectRatio="true" horizontalAlign="center"
			 width="{horizontalList.width}" />
		<mx:ControlBar horizontalAlign="center">
			<mx:HorizontalList id="horizontalList" labelField="label"
				iconField="thumbnailImage" dataProvider="{arr}"
				itemRenderer="CustomItemRenderer" columnCount="4"
				columnWidth="100" rowCount="1" rowHeight="90"
				horizontalScrollPolicy="on"
				alternatingItemColors="[#FFFFFF, #EEEEEE]"/>
		</mx:ControlBar>
	</mx:Panel>
</mx:Application>

CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="100" height="90">
	<mx:Image source="{data.thumbnailImage}"/>
	<mx:Label text="{data.label}"/>
</mx:VBox>