0

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

 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”。我花了几个小时试图解决这个问题,但没有运气。提前感谢您的帮助。

4

2 回答 2

2

这些行看起来不正确:

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>
于 2013-02-18T23:48:21.113 回答
0

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

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

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

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

于 2013-08-18T04:44:00.480 回答