主要技术点:
-
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 >
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 >
效果: