多种方式在List中显示图片

主要技术点：

• itemRender，在list中显示图片和文字
• ProgressBar，显示大图时，使用进度条
• variableRowHeight，在list上显示图片，设置这个属性，才可以根据图片的高度自动调整

代码：

 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left"
3     creationComplete="photoService.send()">
4 
5     <mx:HTTPService id="photoService" resultFormat="e4x"
6         url="http://greenlike.com/flex/learning/projects/photogallery/photos.xml"/>
7     <mx:Script>
8         <![CDATA[
9             import mx.events.ListEvent;
10             [Bindable]
11             private var currentImage: String;
12            
13             private function selectPhoto(event: ListEvent): void
14             {
15                 currentImage = event.target.selectedItem.@image;
16             }
17            
18             private function loadThumb(): void
19             {
20                
21             }
22         ]]>
23     </mx:Script>   
24     <mx:HDividedBox width="100%" height="100%">
25         <mx:TabNavigator width="200" height="100%">
26             <mx:Box label="List View" height="300">
27                 <mx:List width="100%" height="100%" borderStyle="none"
28                     dataProvider="{photoService.lastResult.photo}"
29                     labelField="@title"
30                     change="selectPhoto(event)">
31                 </mx:List>
32             </mx:Box>
33             <mx:Box label="Small View">
34                 <!--variableRowHeight属性很有用，可以根据内部组件的高度自动调整行的高度，使每行可以不等高，这个功能曾经让我找了很久-->
35                 <mx:List width="100%" height="100%" borderStyle="none"
36                     dataProvider="{photoService.lastResult.photo}"
37                     labelField="@title"
38                     variableRowHeight="true"
39                     change="selectPhoto(event)">
40                     <mx:itemRenderer>
41                         <mx:Component>
42                             <mx:HBox>
43                                 <mx:Image source="{data.@thumb}"/>
44                                 <mx:Text text="{data.@title}" width="100%"/>
45                             </mx:HBox>                           
46                         </mx:Component>
47                     </mx:itemRenderer>
48                 </mx:List>
49             </mx:Box>
50             <mx:VBox label="View(Using Repeater)">
51                 <mx:Repeater id="rep" dataProvider="{photoService.lastResult.photo}">
52                     <mx:HBox paddingLeft="6" paddingRight="6"
53                         buttonMode="true">
54                         <mx:Image source="{rep.currentItem.@thumb}" />
55                         <mx:Text text="{rep.currentItem.@title}"/>
56                     </mx:HBox>
57                 </mx:Repeater>
58             </mx:VBox>
59         </mx:TabNavigator>
60         <mx:Box horizontalAlign="center" verticalAlign="middle" 
61             width="100%" height="100%" borderColor="black" borderStyle="solid" borderThickness="1">
62             <!--这个进度条太只能了，指定source属性就都搞定了-->
63             <mx:ProgressBar id="pb" source="img"/>
64             <mx:Image id="img" source="{currentImage}"/>
65         </mx:Box>
66        
67     </mx:HDividedBox>
68 </mx:Application>

效果：