我正在尝试将缩略图放入Flex中的水平列表中。到目前为止，我的工作正常，但我想将它设置为风格化，缩略图行在单击时会显示较大的图像和其他信息。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="main()" backgroundColor="#FFFFFF">
<fx:Style source="AgileWidget.css"/>
<s:states>
<s:State name="State1"/>
<s:State name="thumbViewer"/>
</s:states>
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.events.ListEvent;
import scripts.Equipment;
import scripts.EquipmentXmlLoad;
private var equipAC:Array = new Array();
private var equipXL:EquipmentXmlLoad;
private var myEquipment:ArrayList;
private function main():void{
this.equipXL = new EquipmentXmlLoad("content/labEquipment.xml");
equipXL.addEventListener("XmlLoadedCompleteEvent",xmlCompleted);
this.equipCbo.addEventListener(ListEvent.CHANGE, cbChangeEvent);
}
private function xmlCompleted(e:Event):void{
this.equipAC = this.equipXL.returnArray();
myEquipment = new ArrayList(equipAC);
this.equipCbo.dataProvider = myEquipment;
}
private function cbChangeEvent (evt:Event):void{
var EquipmentClicked:Equipment=Equipment(evt.currentTarget.selectedItem);
this.titleLbl.text = EquipmentClicked.title;
this.descripLbl.text = EquipmentClicked.description;
this.curImg.source = EquipmentClicked.imageThumbnailURL;
this.lgImg.source = EquipmentClicked.imageURL;
this.replaceLbl.text = EquipmentClicked.replacementCost;
this.categoryLbl.text = EquipmentClicked.equipmentCategory;
this.yrLbl.text = EquipmentClicked.yearOfPurchase;
this.mtDayLbl.text = EquipmentClicked.maintenanceDay;
this.mtCostLbl.text = EquipmentClicked.maintenanceCost;
this.avgLifeLbl.text = EquipmentClicked.averageHourlyLife;
}
public function addListListener():void{
myList.addEventListener(MouseEvent.CLICK, function():void
{
updateItemInfo(myList.selectedItem as Equipment);
});
}
public function updateItemInfo(equipmentItem:Equipment):void
{
}
]]>
</fx:Script>
<s:List id="myList" itemRenderer="org.renderer.EquipmentItem"
width="400"
height="200"
horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>
<s:ComboBox id="equipCbo" x="385" y="11" width="364" contentBackgroundColor="#FFFFFF"/>
<s:Label id="titleLbl" x="521" y="294" text="Select Equipment"/>
<s:Label id="descripLbl" x="339" y="403" width="465" height="89"/>
<s:Image id="curImg" x="757" y="10" width="47" height="42"/>
<s:Image id="lgImg" x="480" y="84" width="175" height="187"/>
<s:Label id="replaceLbl" x="700" y="328" text="Replacement Cost"/>
<s:Label id="categoryLbl" x="339" y="328" text="Category"/>
<s:Label id="yrLbl" x="339" y="348" text="Year Purchased"/>
<s:Label id="mtDayLbl" x="706" y="348" text="Maintainence Day"/>
<s:Label id="mtCostLbl" x="700" y="368" text="Maintainence Cost"/>
<s:Label id="avgLifeLbl" x="339" y="368" text="Average Life"/>
</s:Application>
我有两个解析XML的AS3类;这是装载机：
package scripts {
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class EquipmentXmlLoad extends Sprite{
private var docXML:XML;
private var urlLoader:URLLoader;
public function EquipmentXmlLoad( XMLFileName:String ) {
this.urlLoader = new URLLoader;
this.urlLoader.addEventListener( Event.COMPLETE, completeListener );
this.urlLoader.load( new URLRequest( XMLFileName ) );
}
public function completeListener( e:Event ) : void {
this.docXML = new XML( this.urlLoader.data );
this.dispatchEvent( new Event( "XmlLoadedCompleteEvent" ) );
}
public function returnArray() : Array{
var tempArray:Array = new Array();
for( var i:int = 0; i < this.docXML.equipment.length(); i++ ){
var tempEquip:Equipment = new Equipment();
tempEquip.title = this.docXML.equipment[ i ].title;
tempEquip.imageThumbnailURL = this.docXML.equipment[ i ].imageThumbnailURL;
tempEquip.imageURL = this.docXML.equipment[ i ].imageURL;
tempEquip.description = this.docXML.equipment[ i ].description;
tempEquip.replacementCost = this.docXML.equipment[ i ].replacementCost;
tempEquip.equipmentCategory = this.docXML.equipment[ i ].equipmentCategory;
tempEquip.yearOfPurchase = this.docXML.equipment[ i ].yearOfPurchase;
tempEquip.maintenanceDay = this.docXML.equipment[ i ].maintenanceDay;
tempEquip.maintenanceCost = this.docXML.equipment[ i ].maintenanceCost;
tempEquip.averageHourlyLife = this.docXML.equipment[ i ].averageHourlyLife;
tempArray.push( tempEquip );
}
return tempArray;
}
}
}
这是渲染器：
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Image source="{data.imageThumbnailURL}" width="50" height="50" />
<s:Label text="{data.title}" width="120" textAlign="center"/>
</s:ItemRenderer>
答案 0 :(得分：2)
因此，您的请求有两个方面
首先，要显示缩略图，您必须使用带有自定义项目渲染器的List组件。设置列表是最简单的部分：
<s:List id="myList" itemRenderer="org.renderer.EquipmentItem">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>
以下是设备项目的项目渲染器的外观：
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Image source="{data.imageThumbnailURL}" />
</s:ItemRenderer>
这可以通过data属性将列表数据提供程序中的每个对象传递给项呈示器的实例。
这应该可以解决问题的第一部分。现在，要获取单击的项目并对其进行渲染，您需要捕获在更改列表的所选项目时调度的事件。基本上有两种方法可以做到这一点：
1）当选择更改时，使用列表的选定项目调度自定义事件：
为此，首先在列表中设置更改处理程序：
change="dispatchEvent(new EquipmentEvent(EquipmentEvent.ITEM_CLICKED, myList.selectedItem as Equipment))"
然后，自定义事件类可能如下所示：
public class EquipmentEvent extends Event
{
static public const ITEM_CLICKED:String = "itemClicked";
public var equipmentItem:Equipment;
public function EquipmentEvent(type:String, item:Equipment, bubbles:Boolean = false, cancelable:Boolean = false)
{
super(type, bubbles, cancelable);
this.equipmentItem = item;
}
}
然后，您可以直接在包含列表的视图上侦听该事件。
2）第二个解决方案是监听列表调度的点击事件，并获取其选定的项目以显示有关它的信息：
public function addListListener():void
{
myList.addEventListener(MouseEvent.CLICK, function():void
{
updateItemInfo(myList.selectedItem as Equipment);
});
}
public function updateItemInfo(equipmentItem:Equipement):void
{
// item info display logic goes here
// all the info about the selected item is in the equipmentItem parameter
}
由您决定哪种方法最适合您的情况。第一个假定您调解包含列表的视图（即列表的选定项目需要从视图传递到其他对象），第二个假设列表和选定的项目详细信息由相同的视图（即你只需要在同一视图中的两个兄弟组件之间传递信息）。
度过美好的一天。