Flex 使用 HorizontalList 创建相册的运行效果见:http://tongqiuyan.blog.163.com/blog/static/19554530220119225379604/
静态效果如图:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12"> <mx:Script> <![CDATA[ private function init():void { img.source = "http://dl.iteye.com/upload/picture/pic/101168/dcbaf814-39d8-3d16-8955-f5e4fa296496.jpg"; } ]]> </mx:Script> <mx:Array id="arr"> <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" /> <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" /> <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" /> <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" /> <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" /> <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" /> <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" /> </mx:Array> <mx:Panel title="实现简单相册" width="620" height="620" horizontalAlign="center"> <mx:Image id="img" source="{horizontalList.selectedItem.fullImage}" maintainAspectRatio="true" horizontalAlign="center" creationComplete="init();" /> <mx:ControlBar horizontalAlign="center"> <mx:HorizontalList id="horizontalList" labelField="label" iconField="thumbnailImage" dataProvider="{arr}" itemRenderer="CustomItemRenderer" columnCount="4" columnWidth="150" rowCount="1" rowHeight="130" horizontalScrollPolicy="on" alternatingItemColors="[#FFFFFF,#EEEEEE]" /> </mx:ControlBar> </mx:Panel> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle"> <mx:Image source="{data.thumbnailImage}" /> <mx:Label text="{data.label}" /> </mx:VBox>
涉及控件:HorizontalList 、ControlBar 等。