Flex 使用 HorizontalList 创建相册的运行效果见：http://tongqiuyan.blog.163.com/blog/static/19554530220119225379604/

静态效果如图：

 ImageReader.mxml：

 
  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">  
  3. <mx:Script>  
  4.  <![CDATA[  
  5.   private function init():void  
  6.   {  
  7.    img.source = "http://dl.iteye.com/upload/picture/pic/101168/dcbaf814-39d8-3d16-8955-f5e4fa296496.jpg";  
  8.   }  
  9.  ]]>  
  10. </mx:Script>  
  11. <mx:Array id="arr">  
  12.  <mx:Object label="Flex" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101170/28ee2f4b-39eb-3283-bfa5-556576aca04f.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101168/dcbaf814-39d8-3d16-8955-f5e4fa296496.jpg" />  
  13.  <mx:Object label="Flash" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101174/8cc91cad-49a6-32b2-96f5-eed72dfb5e36.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101172/9ee38047-807c-3514-8e4b-27b87e133173.jpg" />  
  14.  <mx:Object label="Illustrator" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101178/531f78b4-0e7c-314c-9ade-af9e5296d0a9.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101176/d0b5794a-967e-3085-b3d1-0c58a828dc56.jpg" />  
  15.  <mx:Object label="Dreamweaver" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101182/83deac33-a14c-32fb-9ea9-cd34b22a5bb1.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101180/1d25f46d-d669-38ea-85f9-030ddadf0e50.jpg" />  
  16.  <mx:Object label="ColdFusion" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101186/d591482d-6b88-3b9a-add0-e57f6800619e.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101184/2141b499-4e4b-3569-9aa3-dc05ee60a2bb.jpg" />  
  17.  <mx:Object label="Eclipse" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101190/8e045954-c269-3813-b9e9-c92cb6d51dd9.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101188/edad31d5-dd73-3f73-8c58-89605467a1df.jpg" />  
  18.  <mx:Object label="Auto" thumbnailImage="http://dl.iteye.com/upload/picture/pic/101194/049a0297-33fc-317a-b408-ed8963d07301.jpg" fullImage="http://dl.iteye.com/upload/picture/pic/101192/9136438c-4338-3c2c-886c-c16c69102251.jpg" />  
  19. </mx:Array>  
  20. <mx:Panel title="实现简单相册" width="620" height="620" horizontalAlign="center">  
  21.  <mx:Image id="img" source="{horizontalList.selectedItem.fullImage}" maintainAspectRatio="true" horizontalAlign="center" creationComplete="init();" />  
  22.  <mx:ControlBar horizontalAlign="center">  
  23.   <mx:HorizontalList id="horizontalList" labelField="label" iconField="thumbnailImage" dataProvider="{arr}" 
  24.          itemRenderer="CustomItemRenderer" columnCount="4" columnWidth="150" rowCount="1" rowHeight="130" 
  25.          horizontalScrollPolicy="on" alternatingItemColors="[#FFFFFF,#EEEEEE]" />  
  26.  </mx:ControlBar>  
  27. </mx:Panel>  
  28. /mx:Application> 
 
  
 CustomItemRenderer.mxml
 
  
 
  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">  
  3.  <mx:Image source="{data.thumbnailImage}" />  
  4.  <mx:Label text="{data.label}" />  
  5. </mx:VBox> 
 
  
涉及控件：HorizontalList 、ControlBar 等。