Adobe Flex：图像和火花列表

Question

我正在尝试在火花列表中显示图像。我尝试了很多方法，但似乎都没有奏效。这是我的代码：

 var list:List = new List();
list.width = 200;
list.height = 300;
list.labelField = "LabelName";

var array:ArrayCollection = new ArrayCollection;
array.addItem(new BitmapImage().source="/assets/appLogo.png");
array.addItem(new BitmapImage().source="/assets/companyLogo.png");

list.dataProvider = list;

列表显示在屏幕上，但图像未出现在列表中。代替行中的图像，它在一行中显示“/assets/appLogo.png”，在另一行中显示“/assets/companyLogo.png”。我花了几个小时试图解决这个问题，但没有运气。提前感谢您的帮助。

Answer 1

这些行看起来不对：

array.addItem(new BitmapImage().source="/assets/appLogo.png");
array.addItem(new BitmapImage().source="/assets/companyLogo.png");

它似乎在做的是创建一个新的 BitMapImage 并在其上设置源属性。您添加到数组中的项目不会是分配的结果吗？或者——听起来你得到了——实际的源值。如果你想要一个 BitMapImages 数组，你可以这样创建它：

var tempImage :BitMapImage = new BitmapImage()
tempImage.source="/assets/appLogo.png"
array.addItem(tempImage);
tempImage = new BitmapImage()
tempImage.source="/assets/companyLogo.png"
array.addItem(tempImage);

但是，除非您构建一个知道如何显示它的自定义 itemRenderer，否则 List 将不知道如何处理 BitmapImage：

<s:List dataProvider="array">
 <s:itemRenderer>
   <s:ItemRenderer dataChange="onDataChange()">
     <fx:Script>
       protected function onDataChange():void{
        this.removeChild(data); 
        this.addChild(data as BitMapImage);
       }
     </fx:Script>
   </s:ItemRenderer>
 </s:itemRenderer>
</s:List>

但是，我怀疑拥有一个表示源的字符串数组然后在渲染器中创建 BitMapImage 会更有益。如果您不打算一次使用所有 BitMapImage 组件，则无需创建大量 BitMapImage 组件。有点像这样：

array.addItem("/assets/appLogo.png");
array.addItem("/assets/companyLogo.png");

<s:List dataProvider="array">
 <s:itemRenderer>
   <s:ItemRenderer dataChange="onDataChange()">
     <fx:Script>
       protected function onDataChange():void{
        this.bitMapImage = data;
       }
     </fx:Script>
     <s:BitMapImage id="bitMapImage" />
   </s:ItemRenderer>
 </s:itemRenderer>
</s:List>

Answer 2

我建议您编写一个纯 ActionScript 渲染器类，它扩展了包含私有 Image 对象的 LabelItemRenderer，然后覆盖 set data() 并创建并加载图像（如果不存在），如果存在则仅加载它。

您传递到列表中的数据应该只是一组带有图像文件 url 路径的字符串，然后将其用作图像的 .source 属性。

然后您可以覆盖 layoutContents 以根据列表行的大小定位和缩放图像。

我已经这样做了，但目前我没有一个超级简单的干净示例可以发布。如果您仍然不明白，请告诉我，我会上传一些代码。