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并在其上设置source属性。您要添加到数组的项目不是分配的结果吗？或者 - 它听起来像你正在获得 - 实际的源值。如果你想要一个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组件。有点像这样：

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渲染器类，它扩展LabelItemRenderer，它包含一个私有Image对象，然后覆盖set data（）并创建并加载图像（如果它不存在），如果它存在则只加载它。 / p>

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

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

我已经完成了这项工作，但目前我还没有一个超级简洁的例子。如果你仍然没有得到它，请告诉我，我会上传一些代码。

Adobe Flex：图像和火花列表

2 个答案: