多种方式在List中显示图片

主要技术点：

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

代码：

1  <? 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 >

效果：

xiaoguo

转载于:https://www.cnblogs.com/iihe602/archive/2009/08/18/1549326.html