Flex图片列表

图片列表

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="top"
				backgroundColor="white">
				
	<mx:Array id="arr">
		<mx:Object label="Flex"
				   thumbnailImage="assets/images1.jpg"
				   fullImage="assets/images1.jpg"/>
		<mx:Object label="Flash"
				   thumbnailImage="assets/images2.jpg"
				   fullImage="assets/images2.jpg"/>
		<mx:Object label="Illustrator"
				   thumbnailImage="assets/images3.jpg"
				   fullImage="assets/images3.jpg"/>
		
	</mx:Array>
	
	<mx:Panel title="{horizontalList.selectedItem.label}"
			  height="100%"
			  horizontalAlign="center">
			  
		<mx:Image id="img"
				  source="{horizontalList.selectedItem.fullImage}"
				  maintainAspectRatio="true"
				  horizontalAlign="center"
				  width="{horizontalList.width}"
				  height="100%"/>
				  
		<mx:ControlBar horizontalAlign="center" >
		
		<!--itemRenderer="CustomItemRenderer"--> 
			<mx:HorizontalList id="horizontalList"
							   labelField="label"
							   iconField="thumbnailImage"
							   dataProvider="{arr}"
							   columnCount="4"
							   columnWidth="200"
							   rowCount="1"
							   rowHeight="200"
							   horizontalScrollPolicy="on"
							   >
							   
				<mx:itemRenderer>
					<mx:Component>
						<mx:VBox horizontalAlign="center" verticalAlign="middle">
							<mx:Image source="{data.thumbnailImage}"/>
							<mx:CheckBox label="{data.label}"/>
						</mx:VBox>
					</mx:Component>
				</mx:itemRenderer>
				  	
			</mx:HorizontalList>
							   
				
		</mx:ControlBar>
		
	</mx:Panel>
	
</mx:Application>