Flex 使用 HorizontalList 创建相册的运行效果见：

静态效果如图：

 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 等。

本文转自 tongqiuyan  51CTO博客，原文链接:http://blog.51cto.com/tongqiuyan/695156